Edit 2 buttons ‘description’ and ‘additional info’

I want the 2 buttons ‘description’ and ‘additional info’ on each product to be in the form of buttons like the picture I attached. And on mobile, the 2 buttons ‘description’ and ‘additional info’ are also displayed horizontally like on desktop like the picture I attached.
Please guide me how to do it. Or in the future I hope to have the function to switch the display of the tab buttons, display the buttons horizontally or vertically and the display shape is button or not button depending on each person’s needs.

Attachments:

You must be logged in to view attached files.

Hello,

Can you please share the product page URL so I will check and give you a possible solution?

Best Regards

I send the link in the additional information section

Hello,

Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

.single-product .wd-nav-tabs>li>a {
    background-color: #d5dbe2; /* Background color for buttons */
    border: 2px solid #ccc; /* Border for buttons */
    border-radius: 5px; /* Rounded corners */
    color: #333; /* Text color */
}

.single-product.single-product .wd-nav-tabs>li>a:hover {
    background-color: #007bff; /* Change background on hover */
    color: #fff; /* Change text color on hover */
    border-color: #007bff; /* Change border color on hover */
}

If you want to show the tabs instead of accordion in mobile, Try to use the Theme’s Layout Builder you can create Custom Layouts for WooCommerce pages like Shop, Category, Single Product page, Cart, and Checkouts. So, you can use that to create your own custom layouts for a single product page and use the “product tabs” widget.

Further, you can read more about the Layout Builder here: https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/

Best Regards

[Author]

Posts