Questions about WooCommerce product display in BeTheme
Hello BeTheme Support team,
I am currently using BeTheme with WooCommerce and I would appreciate your help with the following:
- I have already adjusted the shop product image size, but I would also like to know if it’s possible to completely remove the gaps/spaces between product images in the shop grid.
- On single product pages, I currently need to click a small icon in order to enlarge the product image. Ideally, I would like the lightbox/zoom view to open when clicking directly on the main product image itself. Is there a theme option to enable this behavior?
- I would also like to ask whether BeTheme offers options to customize how product variations (e.g., S, M, L sizes) are displayed. At the moment, I cannot find such a setting in the Theme Options. Could you confirm whether this can be handled via BeTheme settings, or if it would require custom code
https://aliceblue-chimpanzee-993733.hostingersite.com/
Thank you very much for your assistance.
Best regards,
Comments
Hi,
1) Please use the following CSS code:
.woocommerce .products .product{ margin: 0!important; }Put it in Betheme -> Theme options -> Custom CSS & JS -> CSS.
2) Edit your single product template, and Disable Zoom effect for Product Images element:
3) Can you explain in more detail what you want to achieve, please?
Thanks
I would like to clarify my third question about product attributes (for example, product sizes such as S, M, L). The way the attribute options are currently displayed by default does not really fit the design I would like.
My question is:
- Is there any way within BeTheme to change the design/layout of how the product attributes (sizes) are displayed?
- If this is not possible within the theme itself, I would prefer not to use custom coding. Instead, could you recommend a plugin that works well with BeTheme for customizing the attribute/variation design?
- If there is no recommended solution, I will look for a plugin myself.
Also, I would like to ask an additional question:
- What is the best way to upload product images to the shop so that they are not too heavy (and do not slow down the site), but still keep the best possible quality? Do you recommend any specific image size, format, or plugin for optimization?
Thank you very much for your guidance.
1) Thank you for your message, but it does not quite explain what your goal exactly is. Please explain how you would like to modify the design. Attaching some examples would also help.
2) For images, I suggest using sizes that will be displayed on the product page. For example, if you have a site grid set to 1200px and product images will take half of the space, then it will be good if they are around 600px in width. Also your images should be in WEBP format.
Best regards
I’m trying to create the same design as your template in sizes and colors. In my eshop it doesn't showed like this. How exactly can I do this without using code? Is it a plugin, or can it be modified directly from inside the theme?
These are built-in theme variation swatches.
You can see how to create them in the following video tutorial:
https://support.muffingroup.com/video-tutorials/how-to-use-woocommerce-attribute-swatches/
Best regards