How to Add See More Button in WooCommerce Products

If you’re hurrying to add a button labeled “SEE MORE” that opens the single product page, you’ve come to the right place.

Whether you have a coding background or not, don’t worry — follow these steps to find the solution. If you have hosting access, navigate to your site and open WooCommerce from the plugins section. If you don’t have hosting access, simply add the “Advanced File Manager — Plugin” to your site and follow the given path:

wp-content > plugins > woocommerce > templates > content-products.php

Scroll down to the product design section, and paste the code provided just before the <li> tag closes.

<div style=”width:100%;”>
<?php
// Add “See More” link
echo ‘<a href=”’ . get_permalink() . ‘“ class=”button see-more-button”>Se mere</a>’;
?>
</div>

Now add your custom CSS in advanced CSS for this see more button:

a.see-more-button {
color: white;
/* padding: 10px 20px; */
text-align: center;
text-decoration: none;
font-family: gilroy light,Sans-serif;
margin-bottom: 20px;
margin-top: 20px;
font-size: 14px;
font-weight: 600;
text-align: center;
transition: all .1s;
background-color: #3bb54a;
border-radius: 4px;
width: calc(100%);
height: 40px;
}
a.see-more-button:hover {
color: white;
background-color: #009245;}