Product Page Help

Hi friends!

I have a few questions that I’m hoping you guys can help with! See below:

1. When you hover over one of our variation swatches on the product detail page, the tooltip that displays is tiny. How can I make this font bigger?

2. I cannot change the size of the “SKUS available” font. Not sure if this is because of a table css element or something else? Would you mind checking?

3. I asked this in a previous topic but, after some research, would like to revisit.
We would like to have the color name shown on screen after “Color:” and the swatches dropped down. For example:

Color: Blue
(swatch)(swatch)(swatch)

It is absolutely vital for us that the color name AND swatches are displayed on the product page. It seems that should be a standard option on any theme with variation swatches. Can you please look at the backend and see if there is any solution? I added this to feature requests, but I’m looking for a quick work-around. Our website has to be live in less than a month D: Any help on this one would be so so soooo appreciated! <3

I figured out how to drop the swatches down (code below) now if I could just figure out the function to add in the js file…

}
.swatch-on-single.swatch-with-bg {
width: 50px;
height: 50px;
}
.single-product-content .variations tr {
display: flex;
display: -webkit-flex;
-webkit-display: flex;
-ms-display: flex;
flex-direction: column;
-webkitflex-direction: column;
-ms-flex-direction: column;
margin-bottom:15px;
}
.single-product-content .variations tr:last-child {
margin-bottom:0px;
}
.single-product-content .variations td {
padding-bottom:0;
}
.single-product-content .variations .label {
margin-bottom:15px;
}
.single-product-content .variations label {
margin-right:0;
}

Attachments:

You must be logged in to view attached files.

Hello,

1) There is no such option to increase the font size of tooltip shown on the hover of variations. It requires customization and this is beyond our limitations and support policy.

2) To change the font size of SKU inside single product page. You can use the below CSS code inside global custom CSS are under theme settings:

.product_meta .sku {
font-size:20px;
}

Result: https://jmp.sh/JLObUPF

OR

If you are talking about the tab “SKUS AVAILABLE” inside your single product page. Then you can use the below CSS code to increase the font size of all those tabs:

.tabs-layout-tabs .tabs li a {
font-size: 25px;
}

OR

To just increase the size of “SKUS AVAILABLE” tab only use the below CSS code:

.skus-available_tab a{
font-size: 25px;
}

3) Normally when you hover over the swatch the color name appears in the tooltip. Unfortunately with theme current options the color name can’t be displayed on screen after “Color”. Actually when you used color then the color name goes hidden.

You can try the below CSS code at your own risk:

.woodmart-tooltip{
font-size:25px  !important;
padding-left: 30px;
}

.swatch-on-single:not(:last-child) {
margin-right: 15px;
margin-left: 50px;
}

Result: https://jmp.sh/oe06zHW

Best Regards.

1) The tooltips on your demos are not that small (screenshot attached). I changed themes and tooltip were at a normal size, so it seems to be an issue within the Woodmart theme. Being able to customize the size would be ideal, but they need to be legible. Can you please log in to my site and check what is causing them to be so small?

2) My apologies – I believe my initial question was unclear. Let me rephrase:

The font WITHIN the tab (labeled “SKUs available” – it is a custom added tab) is smaller than the others. It is a table (screenshot attached). Can you please log in to my site and check what is causing them to be so small?

3) Thank you for trying to help but unfortunately, that CSS did not work.

Is there a custom JS code I could add that would cause an “event” that would pull the attribute label and add it next to “Color:”? See attached screenshot.

4) All of the product tabs completely disappear when in mobile view. Is there a setting that is causing this or an error within the theme?

Thanks so much again for all of your help!

Hello,

1) Your tooltip size looks just fine as same as in my test site. You can check the screenshot of your product page.

Screenshot: https://jmp.sh/Y2XKp23

2) I saw your “SKUs available” tab it contains the same font size as like the other tabs.

Screenshot for clarification: https://jmp.sh/WpLMw51

But if you still want to increase that tab font size you can use the CSS below CSS code in global custom CSS are under theme settings:

.product-tabs-wrapper .tabs li.skus-available_tab a{
font-size: 30px;
}

3) Most welcome. But there is no such JS code. It requires customization and this is beyond our limitations and support policy.

4) As your tabs goes hidden in the mobile view you can try the below CSS code in Custom CSS for mobile are under theme settings. So that the tabs will shown in mobile view also.

.tabs-layout-tabs {
    display: block;
}

Best Regards.

[Author]

Posts