Website Building » WooCommerce » How Do I Change the Read More Button in WooCommerce?

How Do I Change the Read More Button in WooCommerce?

Last updated on October 1, 2022 @ 10:15 pm

By default, the Read More button in WooCommerce is styled using your theme’s button CSS. If you want to change the style of the button, you can do so by adding some CSS to your theme.

In your theme’s stylesheet, you can Target the Read More button by using the .button class. For example, to change the button’s background color to red, you would add the following CSS:

.button {
  background-color: red;
}

If you want to change the color of the text on the button, you can use the .button-text class. For example, to change the text color to white, you would add the following CSS:

PRO TIP: If you are not a developer or comfortable with code, we recommend that you seek help from a developer before making any changes to your WooCommerce Read More button. Making changes to your button code can break your site if not done correctly.
.button-text {
  color: white;
}

You can also change the size of the Read More button by using the .button-small or .button-large classes. For example, to make the button smaller, you would add the following CSS:

.button-small {
  font-size: 12px;
}

And to make the button larger, you would add this CSS:

.button-large {
  font-size: 16px;
}

Once you have added the CSS to your theme’s stylesheet, save your changes and refresh your website to see the new style of your Read More button.

Conclusion

In conclusion, changing the Read More button in WooCommerce is easy and only requires a few lines of CSS. You can Target the button by using the .button class and then use other classes like .button-text or .button-small to change its appearance. Save your changes and refresh your website to see the new style of your Read More button.

Madison Geldart

Madison Geldart

Cloud infrastructure engineer and tech mess solver.