CSS help ( brand image – product page, price – shop, badges – shop)

1. I would like to modify the size of the brand image on the product page, could you please direct me on how to target that element?
2. How to target the price displayed in the shop and product archive (both regular price and sale price) if I want to make them bold or increase size?
3. How to change the position of the badges without changing the style of the product display? also how to target the badges to increase size, or change the font?

Hi frestigeth,

Thanks for reaching to us.

Please provide URL of the mentioned page, so I can take a closer look.

Regards,

The website is not live, so I have no URL to provide to you where you can see the actual site. But see the images for what I am referring to.

Could you please direct me on how to target these elements with custom CSS?

1. I would like to modify the size of the brand image on the product page, could you please direct me on how to target that element?
2. How to target the price displayed in the shop and product archive (both regular price and sale price) if I want to make them bold or increase size?
3. How to change the position of the badges without changing the style of the product display? also how to target the badges to increase size, or change the font?

Attachments:

You must be logged in to view attached files.

Hi frestigeth,

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

div.wd-product-brands img {
    max-width: 90px;
}

2. Navigate to Theme Settings > Typography > Advanced. In this area, you can assign elements to like screenshot to change the styles https://ibb.co/QvLcHp7X

Please refer to our documentation https://xtemos.com/docs-topic/advanced-typography-settings/

3. Where do you want to move these bags?

Navigate to Theme Settings > Typography > Advanced. In this area, you can assign elements to Custom elements:

.product-labels.labels-rounded .new.product-label, .product-labels.labels-rounded .hot.product-label, .product-labels.labels-rounded .featured.product-label

Regards,

1. This worked great. Thank you! The logo now appears larger.
Is it possible to also move it above the product title? (see attached image)

2. Thank you! I was able to locate the setting I was looking for.

3. I would like to move the badges to the top-right instead of the top- left

Attachments:

You must be logged in to view attached files.

Hi frestigeth,

1. I kindly recommend you to use Custom Product layout, which is built with WoodMart WooCommerce builder, then you can place it where you want.

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

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

.product-wrapper .product-labels {
    left: 80%;
}

Regards,

Thank you for your help, your solutions for #3 works perfectly, and I will review the details you sent me about the layouts.

[Author]

Posts