Tag under the product name on the product page

[icemansociety]

How do I add a table tag under the product name on the product page?

Like the image where I circled in red. Is there any apps or ways to feature this?

I have also put their website link here, can anyone inspect and tell me how they create this?

https://www.thegldshop.com/products/5mm-miami-cuban-chain-original

https://drippy.amsterdam/products/tennisboy-5mm-white-gold

[AvadaCommerce]

Hi @icemansociety ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

[icemansociety]

www.icemansociety.com

[AvadaCommerce]

Hi @icemansociety ,

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css->paste below code at the bottom of the file:

.product__title__wrapper .product__title:before {
    content: "Real gold";
    display: block;
    width: 100px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    border: 1px solid #000;
    background: #000;
    color: #fff;
    position: absolute;
    bottom: 38px;
}
.product__title__wrapper .product__title:after {
    content: "Lifetime Guarantee";
    display: block;
    width: 150px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    border: 1px solid #000;
    margin-left: 100px;
    
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

[icemansociety]

Hi,

I added the code, but there's problem on the mobile version. It works fine on the desktop version but on the mobile version, the REAL GOLD text box are not in the right position. I have attach the photo regarding this problem.

[AvadaCommerce]

Hi @icemansociety ,

You can try replace previous code by below code:

.product__title__wrapper .product__title {
    display: flex;
    flex-wrap: wrap;
}
.product__title__wrapper .product__title:before {
    content: "Real gold";
    display: block;
    width: 100px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    border: 1px solid #000;
    background: #000;
    color: #fff;
    order: 1;
}
.product__title__wrapper .product__title:after {
    content: "Lifetime Guarantee";
    display: block;
    width: 150px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    border: 1px solid #000;
    order: 2;    
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

[icemansociety]

Hi,

Yes it works perfectly now! By the way is there way add margin on the top of the table box? so it can have a little space between the product name. Because now it seems too close to the product name.

Thank you!

[AvadaCommerce · Accepted solution]

HI @icemansociety ,

You can try replace below code:

.product__title__wrapper .product__title {
    display: flex;
    flex-wrap: wrap;
}
.product__title__wrapper .product__title:before {
    content: "Real gold";
    display: block;
    width: 100px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    border: 1px solid #000;
    background: #000;
    color: #fff;
    order: 1;
    margin-top: 5px;
}
.product__title__wrapper .product__title:after {
    content: "Lifetime Guarantee";
    display: block;
    width: 150px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    border: 1px solid #000;
    order: 2;    
    margin-top: 5px;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

Thanks you