Return to previous page

Order product details in shop page – archives

This topic has 2 replies, 2 voices, and was last updated 1 years ago ago by Tony Rodriguez

be Marketing

Participant

November 8, 2023 at 13:24

Hi,

I would like to change the order of son details of the product in the shop page (archive).

1. Brand in the first line. I would like to change the color of the font to black.
2. Product tittle in the second line
3. Swatches in third line
4. Add to card in the last line

I attached a screenshot with the changes: https://prnt.sc/n_l3Ci4K7aeh

#373027 Copied Theme version: 9.2.2 WooCommerce version: 6.4

1 Answer
Tony Rodriguez

Support staff

November 9, 2023 at 07:00
Hello, @be Marketing,

Thank you for contacting us and for using XStore.

To address your concern, we kindly request you to follow the given instructions. Please copy and paste the provided CSS code into the designated location: Xstore > Theme Options > Theme Custom CSS > Global CSS. After pasting the code, please ensure to publish it.
```
.product-details {
    display: flex;
    flex-direction: column;
}
.product-details .products-page-brands {
    order: 1;
}
.product-details .product-title {
    order: 2;
    height: unset !important;
}
.product-details .st-swatch-in-loop{
    order: 3 !important; 
}

.product-details .price {
    order: 4;
}
.content-product .quantity-wrapper{
 order: 5;
 justify-content: center !important;
}
.product-details .products-page-cats {
    order: 6 ;
}
.content-product .products-page-brands,.products-page-brands a,.conte.products-page-cats a {
    color: rgb(15,15,15) !important;
}
```
Upon successful implementation, the result should resemble the following:
https://ibb.co/0YF7ddn

We hope this resolves your issue. Should you require further assistance, please do not hesitate to contact us.

Best Regards,
8Theme’s Team.
#373102 Copied
Tagged: archives in woocommerce, product details order, shop page customization, woocommerce product management, woocommerce templates, wordpress ecommerce solutions, wordpress shop page
Viewing 2 results - 1 through 2 (of 2 total)