Rounding for product images on Archive Page and Single Product page

Hi there,

We would like to have the product images on Archive Page and Single Product page with rounding of 0px (sharp corners). The rest of the elements could follow the roundness in the theme setting. We tried to set this up via the theme preset but is unable to do so. Could you guide us with this?

Otherwise, could you provide us with the CSS code to do so?

Thank you.

Hello,

Sorry to hear about the inconvenience.

Firstly, we have confirmed from the Test Site the Rounding option under the Theme Settings > Styles and colors > Styles > Custom > Custom rounding is working fine: https://ibb.co/XC7ZLYM

So, can you please share valid WP-ADMIN Login details of your Site in the below listed format on which you are facing the issue so that we can proceed further and check the issue on your Site and assist you accordingly.

WP-ADMIN URL:
WP-ADMIN USERNAME:
WP-ADMIN PASSWORD:

Best Regards

[chuananz]

Hi,

Yes we the rounding effect works on our end as well. However, we would like all product images on the Archive page and Single Product page to have a rounding effect of 0 (sharp cornered). Please refer to the files attached to see the product images we are referring to.

The rest of the elements in the website can take the rounding effect as specified in the theme settings as shown by you. Only the product images on the Archive page and Single Product page will have sharp corners.

Is there a setting on the theme preset that allows us to do this? Otherwise, able to provide us with the CSS code?

• This reply was modified 2 years, 1 month ago by chuananz.
• This reply was modified 2 years, 1 month ago by chuananz.

Attachments:

You must be logged in to view attached files.

Hi is there an update for this?

Thanks.

Hello,

Your mentioned concerns are now resolved. The following Custom CSS has been applied on your Site to make the Border Radius 0 for Archive and Single Product page:

.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image {
    border-radius: 0px !important;
}

.single-product .woocommerce-product-gallery img {
	border-radius: 0px !important;
}

.archive .product-grid-item :is(.product-image-link,.hover-img) img {
    border-radius: 0px !important;
}

.archive .product-grid-item .product-wrapper {
    border-radius: 0px !important;
}

.archive .product-element-top {
	border-radius: 0px !important;
}

Location to find Custom CSS, go to Dashboard >> Theme Settings >> Custom CSS >> Global CSS section >> there you can find the CSS pasted.

Best Regards.

Got it, thank you.

Also, on the Desktop Archive shop & category pages, could we remove the wishlist icon and “select options” elements that appear when the mouse hovers over? (see attached)

We just want the product image to change when hovered over. There will be no fade or zoom effect. Just change of image with no effect will do.

On mobile, we would like remove the elements on the product image as well (see attached).

Thank you.

Attachments:

You must be logged in to view attached files.

Hello,

1- To hide the Wishlist Icon from the Products on Shop & Category pages, please go to Dashboard > Theme Settings > Shop > Wishlist > Buttons > Show button on products in loop > just turn this toggle off and the Wishlist button will get hidden from Products Hover: https://ibb.co/59kYmDj

For the time being, we have done that on your Site. The changes are done for Mobile view too automatically.

2- The Select Options button that you are mentioning is the Add to Cart button for the Products. For Variable Products, it shows Select Options and for simple Products it shows Add to Cart there. Select Options is there to let you first select Variations and then proceed with adding Product to Cart.

So, do you still want to remove this?

Best Regards

2- The Select Options button that you are mentioning is the Add to Cart button for the Products. For Variable Products, it shows Select Options and for simple Products it shows Add to Cart there. Select Options is there to let you first select Variations and then proceed with adding Product to Cart.

Our reply: yes we would like to remove this. Also we would like to remove the fade and zoom effect when hovered over. The product image should just change when hovered.

Thank you

Hi there, the changes are not reflected on mobile as there is the blue cart icon on the bottom left of the product image:

Please check.

Attachments:

You must be logged in to view attached files.

Hello,

To remove the Add to Cart button from Products on Hover, please try using the below Custom CSS code and paste it to Dashboard >> Theme Settings >> Custom CSS >> Global CSS section:

.wd-hover-quick:hover .wd-add-btn {
  display: none !important;
}

For the Fade and Zoom-out disabling, please try out the following Custom CSS:

.product-grid-item .hover-img {
    transition: none !important;
}

For the time being, we have applied the CSS on your Site.

Best Regards

Hi Aizaz,

The blue cart icon is still present on MOBILE. On desktop, it is no longer there, but on mobile we are still seeing it.

Kindly assist us with a fix asap.

Thank you.

Hello,

The Cart Icon is now removed from the Mobile view too on your Site with the help of following Custom CSS:

.wd-hover-quick .wd-add-btn {
   display: none !important;
}

Location to find Custom CSS applied, go to Dashboard >> Theme Settings >> Custom CSS >> Custom CSS for Mobile >> there you can find the CSS pasted.

Please check back your Site after completely clearing browser and server cache.

Best Regards

Hi, we changed the hover on product style. Could we please remove the following:

On mobile, there is an “Add to cart” or “Select Options” text, we would like to remove it.

On desktop, when hovered, the price changes to “Add to cart” or “Select Options”. We would like to remove this effect.

Kindly refer to the attach images and let us know. Thank you.

Attachments:

You must be logged in to view attached files.

Hello,

Ok, so we have came across your request and would suggest you if you want to add any further CSS solutions in this regard then try enabling the Catalog Mode on your Site which you can find under the Dashboard > Theme Settings > Shop > Catalog mode > there you can find the option Enable catalog mode > just turn that on and then the Add to Cart or Select Options for the Variable Products will not appear on your Site when hovered over the Product: https://ibb.co/rkcwZ3w

Hope this works out for you !

Best Regards

This cannot work as the add to cart button will be hidden on the Single Product page.

Kindly assist with a CSS code. Thank you.

Hello,

Actually, it’s quite difficult to use Custom CSS here to specifically hide the Add to Cart or Select Options button here because the Product Style layout that you have currently selected shows the Price and Add to Cart buttons on transition effect with Hover.

So, we tried our level best to hide the Add to Cart and Select Options button while Price remained there without the Transition but unfortunately it wasn’t possible with this current Layout selected.

Hope you can understand !

Best Regards

[Author]

Posts