Product Page Attribute Style Issues
-
Hello,
I would like to move the attributes of the product page below the title. You’ll understand what I mean after viewing the attached image.
-
This topic was modified 6 months ago by
2303805254.
Attachments:
You must be
logged in to view attached files.
Hello,
I’ve checked both product pages you shared. The difference you’re seeing is caused by different variation/attribute systems being used:
On your site (hanfutale.com), the attributes are displayed using WoodMart’s built-in variation swatches, which follow the theme’s default product layout structure.
On the reference site, the attributes are shown using a third-party WooCommerce variation swatches plugin, which outputs the attributes in a different position (below the title).
Best Regards,
Could you tell me: does WoodMart not support the effect I mentioned, and do I have to use a plugin to achieve the style I want?
Hello,
Try to add the following custom css code in Theme Settings > Custom CSS > Custom CSS for desktop and check how it works:
.single-product table.variations .cell {
display: block;
}
.single-product table.variations .label {
margin-bottom: 5px;
padding-right: 0;
}
Best Regards,
Hello,
This effect has been successfully implemented on the desktop version, but when I paste the code into the CSS for the mobile version, it does not seem to work.
I want this effect to be applied to mobile phones, desktops, and tablets alike.
-
This reply was modified 6 months ago by 2303805254.
Hello,
Try to add this code in Theme Settings > Custom CSS > Custom CSS for mobile.
.single-product table.variations .cell {
display: block !important;
}
.single-product table.variations .label {
margin-bottom: 5px;
padding-right: 0 !important;
}
Best Regards,
.
