[Resolved] Woocommerce – Homepage Customization

[Sars]

Dear Team,

How to Change color of button and the text in the button
Also, How to Align all the product images evenly
How to set the sizes of the product boxes?
How to Hide the prices shown in the block.
Is there a way to show first 2 and last 2 numbers in pagination? ex: 1 , 2 ……. 11, 12

https://pasteboard.co/VLsO1E4l6LKW.png

site: https://nationalroofingsupply.ca/

[Fernando]

Hi Sarathy,

With regards to changing the text, here is a PHP code you may try:

add_filter( 'woocommerce_product_add_to_cart_text', function( $text ) {
    if ( 'Read more' == $text ) {
        $text = __( 'More Info', 'woocommerce' );
    }

    return $text;
} );

Kindly replace More info with the text you prefer.

Here is an article with regards to adding custom PHP: https://docs.generatepress.com/article/adding-php/#code-snippets

With regards its color, here is an article you may refer to: https://docs.generatepress.com/article/woocommerce-overview/#colors

Alternatively, here is a Custom CSS you may try:

.wp-block-button.wc-block-components-product-button.wc-block-grid__product-add-to-cart > a {
    background-color: rgb(0,0,250);
    color: rgb(255,0,0);'
}

Kindly change the RGB value to your preference.

With regards to the images having different sizes, one approach to resolve this is to upload images with identical aspect-ratios. Alternatively, here is a CSS you may try:

.wc-block-components-product-image.wc-block-grid__product-image img{
    aspect-ratio:1/1;
    object-fit: cover;
}

Here is an article with regards to adding CSS: https://docs.generatepress.com/article/adding-css/#additional-css

Adding it through additional CSS should work.

With regards to the pagination, you might also need custom code or a third Party plugin for this.

Ex: https://wordpress.org/plugins/pagination-styler-for-woocommerce/

Hope this helps! 🙂

[Sars]

Awesome

Thanks Fernando

How to Hide the prices shown in the block.

[Fernando]

Great! To hide the price, here is a custom CSS code you may try:

span.wc-block-grid__product-price.price.wc-block-components-product-price {
    display:none;
}

Hope this helps! 🙂

[Sars]

works Perfectly Well Fernando,
One final help,
On Hover, The number is not visible, Can you kindly give the code to change the hover color on pagination numbers?

Thanks a lot

[Fernando]

Here is a custom code you may try with regards to this:

.wc-block-pagination.wc-block-components-pagination > button:hover{
    color: #cc5252;
}

For reference with regards to color codes: https://www.w3schools.com/colors/colors_picker.asp

Hope this helps! 🙂

[Sars]

Thanks again Fernando.

One final help
How to reduce the sizes of the block and images on mobile.

They look very big on mobile.

[Fernando]

One way to approach this is to add padding to the images on mobile view. Here is a CSS you may try:

@media (max-width: 768px) {
    .wc-block-components-product-image.wc-block-grid__product-image img{
        padding: 20px;
    }
}

Please replace 20px with your preferred padding value.

Kindly let me know how it goes. 🙂

[Sars]

Works and Looks Great!

Thanks a lot Fernando!!!

[Fernando]

You’re welcome Sarathy! Glad that works! As always, feel free to reach out anytime if you’ll need assistance with anything else. 🙂

[Author]

Posts