Variations on cart pages

Kevin Luther

Hello

I have some products that have variations with images representing their different sizes but other products which use the same image. The issue I am running into is with the products that do not have their own images. Is there a setting somewhere that will enable me to clean up the listing of button based variations?

You can view the issue here https://www.blackwiredesigns.com/cat/cables/

Your form does not allow for attachments so I can not send screen shots. Our site requires an account to see much of anything so if you click on the product pages you wont see any of the variations but the main issue with the category view of things.  It would be much nicer looking of the middle product that has the size buttons instead of images were square shaped and not rectangles.

Ahmed Ehsaan

Hi Kevin Luther,

Could you record me reproducing your issue using tool like this? https://www.useloom.com
It helps me to quickly figure out issue and squash it with immediately.

Thank you

Kevin Luther

Hello

I have attached 2 images to this ticket. The first one shows some HDMI cables. As you can see the cables with images for each look great on the category page but the one that features the buttons looks out of place and messes up the page. Is it possible to have the measurements for the buttons be small square images just like the picture versions are?

The other example shows a single item in a category with the same button lay out and as you can see it makes the page look unprofessional.

Thank You

Kevin

 

Ahmed Ehsaan

Hi Kevin Luther,

Your attached image is not showing.

Thank you

Ahmed Ehsaan

Hi Kevin,

Can you please give us a temporary admin access to your site? We’ll try to investigate the issue for you.

You can add new users by going to Users > Add New set the user and password for us, set the role to admin and set the info here.

And add your site URL, login username, and password in the site login area. Follow this guideline: https://www.useloom.com/share/27c1f2ac633c4060b2da883d946107d7

Hope to hear from you soon!

Kevin Luther

Hello

We do not give out back end access to our site as it has a large amount of sensitive information. 2 the URLs where the issue can be seen are:

This page shows the sizes (buttons) in a long row. https://www.blackwiredesigns.com/cat/leaksmart/

This page shows 3 product. 2 of them feature images for their options and 1 of them (in the middle) is just buttons https://www.blackwiredesigns.com/cat/avpro_edge_hdmi/bullettrain_hdmi_cables/ you can see the lay out of this looks very unprofessional. The button boxes should also be in multiple rows like the images.

Please provide settings that could fix this or CSS that would correct the issue. This seems to be a defect in your core css on buttons vs image variables on the shop category pages. There is no reason a button would be in a long list with a ton of white space on each side.

Thank You

Kevin

 

 

Ahmed Ehsaan

Hi Kevin,
Is there any staging copy of this site?
Thank You

Kevin Luther

Hello

We do how ever it is a copy of our main site so has the same data. Is there something specific you need to look at? Did the link I provide not show the issue?

Ahmed Ehsaan

Is it possible to look into your site copy backend?

Kevin Luther

Can you explain in detail what specific settings you are wanting to see on the back end?

We view giving back end access as an extreme security threat as we have customers information and other private info that becomes accessible when we give this out.

 

Kevin Luther

Hello

You already have our theme installed (just not activated) Flatsome 3.9.0

I activated the theme and see button formatting properly on here how ever all examples have 2 sets of options.

I created a test of another item and on your site it is formatting properly. I started to compare your settings and CSS that was loading and found a difference with .woo-variation-swatches-style-squared .button-variable-item and it was set to 30 px. On my site it was set to 100.

So by adjusting this down to 30 px on my site the buttons now format good on the shop pages. How ever a new problem is visible. The icons are now extremely small on the product pages.

So the options on the category page are good now https://www.blackwiredesigns.com/cat/cables/  but when you select a product  and click on it the options to select are the same 30px size and make it difficult to see.

I assumed the archive shop page (settings in variation plugin) would control the visible buttons on the category/shop pages and then the advanced (settings in variation plugin) would control what is on the product pages themselves. It seems that when I adjust the width or height under the advanced tab it changes the settings for both the category/shop page as well as the product page.

Ahmed Ehsaan

Hi Kevin Luther,

Thank you for reaching out to us. Please kindly do a plugin compatibility check by doing these steps to identify the error :

=> Deactivate all of your additional plugins except WooCommerce and WooCommerce Variation Swatches Plugin.

=> See if the problem persists. If the problem resolved, you can tell which plugin might be the culprit of this error by activating your additional plugins one by one.

Looking forward to hearing from you soon.

Thank you

Ahmed Ehsaan

Is it fixed?

Kevin Luther

No it is not fixed.

Swatch settings – Advanced

The height and width settings on here override all settings. It will adjust the sizes for the category page and product page

Swatch Settings – Archive/Shop

The height and width settings here will only adjust the boxes on the category page how ever has css issues with the box sizes and widths.

There is a CSS or internal conflict in the plugin with the 2 settings above.

Ahmed Ehsaan

Okey, do your desired changes here:

Swatch settings – Advanced

And then let me know. I’ll write you some custom css.

Kevin Luther

Hello

For an example I set the width and height to 75px on the advanced tab. This looks excellent on the specific product page but not good on the category page with all of the products.

What I would like is for the buttons to be much smaller on the actual category page. As you can see the advance tab is overriding the shop/category page as well.

Also note this seems to be effecting button based variations IE XS, X, M, L etc.. Anything with text for a button has the issue. Image based variations do not have this issue.

 

Kevin Luther

Hello

Were you able to come up with some CSS examples that I could use? I am a very capable website manager I just need the base css or if you plan on updating the plugin with some changes. 

Ahmed Ehsaan

Hi Kevin,

Try the following css

.archive.woo-variation-swatches-style-squared .button-variable-item {
min-width:auto !important;
}

Thank You

Kevin Luther

Hello

That works great and improves the look nicely. Thank you

Shamser Suzon

Hello Kevin Luther,

Can we please, close the ticket now?

Thanks