Return to previous page

Edit and customize “frequently bought together” widget

This topic has 5 replies, 3 voices, and was last updated 6 months ago ago by Andrew Mitchell

  • Avatar: iRockPod
    iRockPod
    Participant
    August 21, 2024 at 10:56

    Hey 8Theme Team

    I installed the “frequently bought together” widget on my single product page. I also linked some products to it. But it seems that the possibilities to edit and customize this widget are very limited? How can I change the name of the widget (i.e. rename “frequently bought together” or rename the “add all to cart” button)? And how to change e.g. the font of the price for only this widget? In the “content” and “style” tab I dont see these customization possibilities; only for the title style and the button style.

    Thank you for reaching out! 🙂

    Cheers Patrick

    Files is visible for topic creator and
    support staff only.
    #410997 Copied Theme version: 9.3.17
    4 Answers
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    August 21, 2024 at 13:54

    Hello, @iRockPod,

    Thank you for contacting us and for using XStore.

    1/ To update the “Frequently Bought Together” feature on your website, we kindly ask you to install the Loco Translate plugin. Once installed, please follow these steps:

    1. Navigate to Loco > Themes > XStore.
    2. Modify the text according to your requirements.
    3. Save the changes to apply them.

    For your reference, images have been provided in the private content area of our website.

    Additionally, we encourage you to consult our theme documentation for further assistance. You can access it here: [XStore Theme Documentation](https://www.8theme.com/documentation/xstore/theme-translation/base-theme-translation/).

    2/ To change the font-size of the price for only this widget, Please add next custom css code in XStore > Theme Options > Theme custom CSS > Global CSS.

    .elementor-widget .bought-together-products .content-product .price {
    font-size: 20px !important;
}

    You can change the font size value in code as per your requirement.

    We hope this helps. Should you have any questions or require further assistance, please do not hesitate to contact us.

    Best Regards,
    The 8Theme Team

    Please contact administrator
    for this information.
    #411037 Copied
    Avatar: iRockPod
    iRockPod
    Participant
    August 23, 2024 at 07:46

    Thank you very much for the detailed solution! 5/5 support, really! 🙂
    I was wondering, if I also want to change the total price, how do I find the CSS selector? How do I find the CSS selector in general for elements? With the “inspect” on Chrome I only get like “font-size” and stuff, but not the rest like “.elementor-widget .bought-together-products .content-product .price”. If I know this, I wont have to bother you much more, I hope 😀

    Thanks and have a great day
    Patrick

    #411254 Copied
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    August 23, 2024 at 08:57

    Hello, @iRockPod,

    Thank you for your response.

    Should you wish to modify the total price display on your website, kindly incorporate the following custom CSS code:

    .bought-together-products .total-price {
    color: var(--et_dark-2-white);
    font-size: 2rem;
}

    Additionally, if you require guidance on inspecting elements using Google Chrome, we recommend reviewing the article available at the following link: [Chrome DevTools Overview](https://developer.chrome.com/docs/devtools/overview).

    We trust this information will be of assistance 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.
    #411280 Copied
    Avatar: Andrew Mitchell
    Andrew Mitchell
    Support staff
    August 23, 2024 at 09:40

    Dear iRockPod,

    We hope you’re reveling in the experience our theme brings! Your enthusiasm is what fuels our passion. Would you be so kind as to channel that energy into a 5-star rating on ThemeForest? Your feedback is the spark that lights our way!

    Click here to spread the love: https://themeforest.net/downloads

    Thank you for being an integral part of our journey!

    Best Regards,
    The 8Theme Team

    #411293 Copied

  • Tagged: , , , , , ,

  • Viewing 5 results - 1 through 5 (of 5 total)

The issue related to '‘Edit and customize “frequently bought together” widget’' has been successfully resolved, and the topic is now closed for further responses

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Kids Toys Store – WordPress WooCommerce Theme
lazy-placeholder
Sneakers Store – WordPress WooCommerce Theme
lazy-placeholder
Hotel – WordPress Theme
lazy-placeholder
Marseille 02 – WordPress WooCommerce Theme
lazy-placeholder
Pet Shop – WordPress WooCommerce Theme
lazy-placeholder
Poster – WooCommerce Theme
lazy-placeholder
Sushi Store – WordPress WooCommerce Theme
lazy-placeholder
Artmaxy Store – WordPress WooCommerce Theme
lazy-placeholder
Marseille04 – WordPress WooCommerce Theme
lazy-placeholder
SEO Agency – WordPress WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.