Rapid Cart Pro Listing Reveal Button

Rapidcart Pro doesn't not have an in-build way to add stacks to the product listings. If you want to add a button, say to link to something or open a reveal, you have use a code snippet. Here is such a snippet to launch a Foundation Reveal.

All the code should be styled and edited accordingly.

First, add this to the page where the product listing is going to appear. Don't add it to the Rapidcart Pro plugin page.
.menuButton { 

    background-color: #87C232; 

    border: none; 

    border-radius: 10px; 

    color: white; 

    padding: 20px 20px; 

    text-align: center; 

    text-decoration: none; 

    display: inline-block; 

    margin: 0px 0px; 

    cursor: pointer; 

    font-size: 18px; 

.menuButton { 

    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s; 


.menuButton:hover { 

    background-color: #666666; /* Green */ 

    color: 666666; 


Change the colour, padding, radius etc. to suit.

Then, add this to the product listing, change the button text and reveal id accordingly, highlight the code and select … Format > Ignore formatting.
<a href="javascript:void(0)" data-reveal-id="revealName">
<button class="menuButton">button name here</button>
Providing you've added a reveal to the page with the correct parameters, you should be golden.
Be the first to comment!
0 / 1000
1 + 7 = ?