shop page cutomization

Hi there 👋

This can be fixed with some custom CSS. Under Customize > Additional CSS, you can add the following code:
 

/*Align buy/sold product string with price*/
.product a.button.product_type_simple {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
}

/*Change buy text color to green*/
.product a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart {
    color: green!important;
}

/*Change sold text color to red*/
.product a.button.product_type_simple {
    color: red !important;
}

Here is a screenshot of how it will look:

https://www.screencast.com/t/0cHPBvF63
 
If you’d like to learn more about CSS, I highly recommend using the free tutorials at w3schools. Here, you can find the basics of selectors (how to target the right element on the page), and properties (how to change the element on the page).

Cheers!

Oh, I see!

In this case, please use the following code instead:

/*Align buy/sold product string with price*/
.product a.button.product_type_simple {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
}

/*Change buy text color to green*/
.product a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart {
    color: green!important;
}

/*Change sold text color to red*/
.product a.button.product_type_simple {
    color: red !important;
}

/*Align product price to the lef*/
.product span.price {
    text-align: left !important;
}

This is how it should look now:

https://www.screencast.com/t/UwPaa76Ws

Cheers! 🙂

For the mobile, we could keep the same layout as before (as you originally had it) with the price above the purchase button and both aligned to the middle. And for larger screen devices(tablets, desktops, etc), we use the new layout. Does that sound like a plan?

Kindly let me know!

Great! For this, please use the folling code instead:

@media screen and (min-width: 768px) {
    /*Align buy/sold product string with price*/
    .product a.button.product_type_simple {
        position: absolute !important;
        bottom: 0 !important;
        right: 0 !important;
    }
    /*Change buy text color to green*/
    .product a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart {
        color: green!important;
    }
    /*Change sold text color to red*/
    .product a.button.product_type_simple {
        color: red !important;
    }
    /*Align product price to the lef*/
    .product span.price {
        text-align: left !important;
    }
}

Cheers 🙂

Happy to help 😃

Great! I’m going to mark this as resolved – if you have any further questions, you can start a new thread.

Cheers.