Return to previous page

I want to customize products related to design and content

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

smalameri

Participant

January 31, 2024 at 08:58

I want to customize products related to design and content

https://prnt.sc/_wmv39Q_MGN1

Please, contact administrator
for this information.

#381889 Copied Theme version: .9.2.5 WooCommerce version: 8.4.0

3 Answers

Tony Rodriguez

Support staff

January 31, 2024 at 11:59

Hello, @smalameri,

Thank you for using our theme and for contacting us.

The Related Products section on your product page is designed to automatically pull products from your store that share the same tags or categories as the current product. Unfortunately, these products cannot be explicitly specified in the administration; instead, they are influenced by grouping similar products in the same category or utilizing the same tags.

The “Related Products” section on your product page is designed to automatically pull products from your store that share similar tags or categories with the current product. Unfortunately, these specific products cannot be manually specified in the administration panel.

To influence the related products displayed, you can consider the following options:

a)Categories: Ensure that the products you want to appear together in the “Related Products” section belong to the same category. Grouping similar products in the same category can help improve the relevance of the suggestions.

b)Tags: Utilize product tags to create associations between items. Products with common tags are more likely to be displayed together in the “Related Products” section.

Moreover, please note that the linked products you’ve mentioned, such as Cross Sell or Up Sell products and related products, have different features. The Cross Sell element on the Single product page can be used to showcase linked products, providing a more tailored display.

For a visual guide, please refer to the attached image: https://imgur.com/a/3eoURgy and https://imgur.com/TMSzi5T

For a detailed guide on managing Related Products, Cross Sells, and Up Sells, please refer to our Documentation attached in the provided link: https://woo.com/document/related-products-up-sells-and-cross-sells/

We hope this information is helpful.

If you have any additional questions or concerns, please do not hesitate to reach out to us. Our support team is always available to assist you.

Best Regards,
The 8Theme Team

#381918 Copied

smalameri

Participant

January 31, 2024 at 12:31

I mean the design, not the content
How can the design be changed?

#381930 Copied
Tony Rodriguez

Support staff

January 31, 2024 at 12:54
Hello, @smalameri,

Thank you for your response.

1/ Should you be interested in modifying the design of the related products displayed on the single product page, we kindly ask you to proceed as follows:

1. Access the ‘XStore’ section.
2. Navigate to ‘Theme Options’.
3. Select ‘WooCommerce’.
4. Click on ‘Single Product Builder’.
5. Locate ‘Related Product’.
6. Explore all the available options and configure them according to your preferences.
7. Ensure to save your changes by clicking ‘Publish’.

For your convenience, we have included an image to serve as a visual guide. https://ibb.co/54PWCd1

2/ We would like to provide you with guidance on aligning related products on your single product page. Kindly follow the steps outlined below:

1. Navigate to the “XStore” section in your website’s dashboard.
2. Proceed to “Theme Options.”
3. Locate the “Theme Custom CSS” section.
4. Select the “Global CSS” tab.
5. Copy the CSS code provided below and paste it into the designated area.
```
/*Products allignment */
.main-products-loop .product, .products-loop .product, .carousel-area .product-slide .product {
    display: flex;
    justify-content: center;
}
.products-loop .ajax-content, .products-loop {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
}
.content-product {
    flex-direction: column;
    justify-content: space-between;
    display: flex;
    flex: 1;
}
.content-product .quantity-wrapper {
    margin-right: auto;
    margin-left: auto;
}
.swiper-container {
    display: flex;
    align-items: stretch;
}
.product-slide .product {
    display: flex;
    height: 100%;
}
.swiper-wrapper {
    height: auto;
}
.content-product .product-image-wrapper {
    margin-bottom: 10px;
}
.products-grid .product-excerpt {
    min-height: 42px;
}

/* Poravnava product carousel */
.elementor-widget-etheme_product_carousel .swiper-container {
    display: flex;
    align-items: stretch;
}
.elementor-widget-etheme_product_carousel .swiper-slide  .product {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
}
.elementor-widget-etheme_product_carousel .swiper-slide .etheme-product-grid-content {
    align-self: flex-end;
}

/* Home page sliders*/
.products-slider .content-product {
    flex-direction: column;
    justify-content: space-between;
    display: flex;
    flex: 1;
}
.products-slider.swiper-container {
    display: flex;
    align-items: stretch;
}
.product-slide .product {
    display: flex;
    height: 100%;
}
.products-slider .swiper-wrapper {
    height: auto;
}

/* Related products on single product page*/
.elementor-widget-etheme_product_grid .etheme-product-grid-item {
    display: flex;
    flex-wrap: wrap;
}
```
By implementing the above CSS code, you should be able to achieve the desired alignment for the related products on your single product page.

The result should look like this: https://ibb.co/MfrpPgX

We hope this information is helpful.

Warm regards,
The 8Theme’s Team
#381934 Copied
Tagged: content customization woocommerce, custom woocommerce templates, design customization wordpress, woocommerce content products, woocommerce design services, wordpress design products, wordpress templates customization
Viewing 4 results - 1 through 4 (of 4 total)