Return to previous page

How can I move the color swatches to the below of product title on the shop page？

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

napfun

Participant

May 31, 2024 at 02:52

How can I move the color swatches to the below of product title on the shop page？

Image A is the shop page of my website.

Image B is the shop page of my competitor. I want my swatches looks like this, please help me

Files is visible for topic creator and
support staff only.

#397449 Copied Theme version: 9.3.10

7 Answers
Tony Rodriguez

Support staff

May 31, 2024 at 06:32
Hello, @napfun,

Thank you so much for purchasing our theme and contacting our support center.

To address the concern you’ve raised, we kindly ask that you implement the following solution: please navigate to the XStore section, then proceed to ‘Theme Options’, followed by ‘Theme Custom CSS’, and finally, paste the provided CSS code into the ‘Global CSS’ area.
```
.etheme-product-grid-content {
    display: flex;
    flex-direction: column;
}
.etheme-product-grid-title {
    order: 1;
}
.etheme-product-grid-item .st-swatch-in-loop.st-swatch-popup:not(:last-child){
    order: 2;
}
.etheme-product-grid-content .price {
    order: 3;
}
.etheme-product-grid-categories {
    order: 4;
}
.etheme-product-grid-item .quantity-wrapper{
    order: 5;
}
```
We are optimistic that this will effectively resolve the issue at hand. Should you require any further assistance, please do not hesitate to reach out.

Best Regards,
The 8Theme Team
#397456 Copied
napfun

Participant

May 31, 2024 at 10:32

It’s not working, please check

the title was moved to below, but the swatches and item sold fake indicator was fixed in there.

Please adjust your css code.

Files is visible for topic creator and
support staff only.

#397516 Copied

Tony Rodriguez

Support staff

May 31, 2024 at 11:03

Hello, @napfun,

Thank you for your response.

In order to assist you with your inquiry, we request that you provide us with URL and temporary access to the wp-admin of your website. This will enable us to take a closer look at your settings and provide you with a more accurate and specific solution.

To do this, please follow these steps:
– Create an account via Dashboard (Users > Add new) with administrator role. Refer to the following image for guidance: http://prntscr.com/s3rc9m
– Provide us with the username and password for the newly created account via the Private Content area. Refer to the following image for guidance: http://prntscr.com/s5mao7
– Any email address can be used for the new account, it does not have to be your personal email.

We kindly recommend that you take a complete backup of your site before proceeding.

Please let us know once you have completed these steps, and we will promptly review your account information and provide assistance as soon as possible.

Kind Regards,
8theme team

#397522 Copied

napfun

Participant

June 1, 2024 at 04:14

here you are

the code you sent is still there.

this is the shop page url:https://www.napfun.com/shop-all/

Please contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#397594 Copied

Tony Rodriguez

Support staff

June 1, 2024 at 06:12

Hello, @napfun,

We are writing to confirm that the issue you reported has been successfully resolved. The color swatches are now correctly displayed below the product titles on the shop page.

For your reference, we have included a screenshot in the private content area of our correspondence.

We trust that this resolves your concern, and we thank you for providing the necessary wp-admin login details to address this matter efficiently.

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

Best Regards,
The 8Theme Team

Please contact administrator
for this information.

#397599 Copied

napfun

Participant

June 1, 2024 at 08:27

Thanks so much, it looks good

#397615 Copied

Andrew Mitchell

Support staff

June 1, 2024 at 08:27

Dear napfun,

As we continue our mission to exceed expectations, your insights become increasingly valuable. Could we, with all due respect, request your thoughtful feedback by giving our theme a deserved 5-star rating on ThemeForest?

Click here to share your valuable perspective: https://themeforest.net/downloads

Your time and trust are highly appreciated!

Best Regards,
The 8Theme Team

#397616 Copied
Tagged: best selling, color swatches, move color swatches, product title, shop page, woocommerce customization, woocommerce themes
Viewing 8 results - 1 through 8 (of 8 total)

The issue related to '‘How can I move the color swatches to the below of product title on the shop page？’' has been successfully resolved, and the topic is now closed for further responses

How can I move the color swatches to the below of product title on the shop page？

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection