Product Page Attribute Style Issues

[2303805254]

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,

[2303805254]

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,

[Author]

Posts