Changing Badge Location

[mjkwon0304]

Hi,

I would like to change badge location.

 

On both of product listing page and detail page,

badges(new, sale) are on the thumbnail,

but want to locate badges below product thumbnail part as attached image.

 

It would be appreciated if you could tell me which file of woocommerce I need to change and how to change.

 

thanks,

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

You can add below code to functions.php in claue-child

and add custom css in Claue > Theme Option > General Layout > Custom CSS

.badge span {position: absolute;}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[mjkwon0304]

Thank you for your help.

I applied the code to product list appropriately.

 

But badge is displayed strangely on product single page.

Can you please check this?

 

http://gganma.cafe24.com/shop/test/

[Harry]

Sorry for late reply.

I saw you add custom css code in child theme.

.badge span { display: table-cell; height: 20px; line-height: 20px; position: relative; top: inherit; z-index: inherit; }

You should change css to

.products .badge span, .product-extra .badge span { display: table-cell; height: 20px; line-height: 20px; position: relative; top: inherit; z-index: inherit; }

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Author]

Posts