Return to previous page

Сustomization of product cards in the catalog

This topic has 4 replies, 2 voices, and was last updated 8 months, 3 weeks ago ago by Tony Rodriguez

IT-Spectrum

Participant

July 24, 2024 at 19:05

Hi. In the theme settings, I can change the layout of the product card. But how to change the color of buttons when hovering? How to set the kind of buttons?

https://take.ms/ShW1H

Is it possible to do it in the settings or do I need to edit CSS styles?

#406806 Copied Theme version: 9.3.16

3 Answers
Tony Rodriguez

Support staff

July 25, 2024 at 08:20
Hello, @IT-Spectrum,

Thank you for contacting us and for using XStore.

If you are currently utilizing the default product archive layout provided through our customizer, you have the option to modify the hover color of the buttons. To do this, please follow these steps:

1. Navigate to **XStore > Theme Options > WooCommerce > Shop > Product Design > Hover Color Scheme**.
2. Select the desired option according to your requirements.
3. Click on **Publish** to apply the changes.

For your reference, you can view the settings by clicking on this link: [View Image](https://paste.pics/RJ411).

Alternatively, if you prefer to use custom CSS, please insert the following code into Xstore > Theme options > Theme custom CSS > Global CSS:

.view-color-white .footer-product .xstore-wishlist { color: var(--et_dark-color) !important; background-color: lawngreen !important; }

You can change the background color as per your requirements.

We hope this helps.

Should you have any further questions or require additional assistance, please do not hesitate to contact us.

Best Regards,
The 8Theme Team
#406866 Copied
IT-Spectrum

Participant

July 25, 2024 at 13:54

ok, I get it, colors, sizes are all by CSS….. but how to choose which buttons to show and which not to show ?

#406969 Copied

Tony Rodriguez

Support staff

July 26, 2024 at 06:04

Hello, @IT-Spectrum,

1/ If you are currently utilizing the default layout for your product archive pages and wish to customize it, please follow these steps:

1. Navigate to XStore > Theme Options.
2. Proceed to WooCommerce > Shop > Product Design.
3. Select the desired design type according to your requirements.
4. Click “Publish” to apply the changes.

For your reference, please see the attached image which illustrates these steps.

2/ If you are currently utilizing a custom layout for your archive pages, we kindly request that you follow these steps to adjust the hover effects settings according to your preferences:

1. Navigate to **XStore Builders**.
2. Select **Product Archive Builder**.
3. Choose **Edit Template**.
4. Click on **Edit Archive Product**.
5. Proceed to **Hover Effects**.
6. Toggle the button to turn the effects on or off as required.
7. Ensure to click **Update** to save your changes.

For your convenience, we have attached an image to serve as a reference.

Please read our theme documentation here: https://www.8theme.com/documentation/xstore/xstore-builders/xstore-products-archive-builder-with-elementor/

We hope this information is helpful to you. Should you have any further inquiries, please do not hesitate to contact us.

Best Regards,
The 8Theme Team

Please contact administrator
for this information.

#407050 Copied
Viewing 4 results - 1 through 4 (of 4 total)