Customizing WooCommerce catalog page button

[threedogdigital]

So I want to move the “check it out” button from inside the image to below the description, on the right side, on the same row as the price, like this…

Here’s the url: https://backyardbliss.club/

How do I do that?

Also, how do I move the title of the product ABOVE the image?

Thanks!

Adam

[thai]

Hi There,

Please add the following CSS under Theme Options > CSS:

.woocommerce li.product .entry-header .button {
    top: auto;
    right: 0;
    left: auto;
    bottom: 0;
    width: 150px;
}

.woocommerce li.product .entry-product h3 {
    margin-top: 0;
    font-size: 22px;
}

After that add this custom code under functions.php file locates in your child theme:

remove_action( 'woocommerce_shop_loop_item_title', 'x_woocommerce_template_loop_product_title', 10 );
add_action( 'woocommerce_before_shop_loop_item', 'x_woocommerce_template_loop_product_title', 11 );

Hope it helps

[threedogdigital]

Awesome, thanks! But now I have 3 new problems, lol…

1. The button is in the correct spot now, but it only displays on hover. How do I change that?

2. How do I move the “sale” button so it doesn’t block the title like here:

3. How do I remove the second title underneath the picture (as seen above)?

Thanks so much!

Adam

[ruenel]

Hello There,

Thanks for updating in!

1.) To make sure that the button will always appear on the page and not just on hover, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.woocommerce li.product .entry-header .button {
    opacity: 1;
}

2.) To reposition the Sale button, please make use of this code:

.woocommerce li.product .onsale {
    top: 50px;
    left: auto;
    right: 20px;
}

Swap the value of the left and right attribute in the code if you want to display the Sale button on the left side.

3.) And to remove the 2nd title, please make sure of this code:

.woocommerce li.product .entry-product h3 {
    margin:  5px 10px;
}
.woocommerce li.product .entry-product .entry-header h3 {
    display: none;
}

Hope this helps.

[threedogdigital]

That did it… thanks!

[ruenel]

You’re welcome!
We’re glad we were able to help you out.