This topic has 5 replies, 3 voices, and was last updated 4 months ago ago by Andrew Mitchell
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
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
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
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
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
The issue related to '‘Edit and customize “frequently bought together” widget’' has been successfully resolved, and the topic is now closed for further responses