Adding and styling buttons

BySupport Admin

Buttons are the primary way your customers take action on your site. Whether you want them to buy a product, view a menu, or sign up for a newsletter, a well-placed button makes that next step obvious.

How to add a button

We recommend using the Advanced Button block included with your WooShop site. It offers more design control than the standard WordPress button.

  1. Open your page or post: Navigate to the area where you want the button.

  2. Add the block: Click the (+) icon and search for "Advanced Button." Click to add it to your page.

  3. Enter your text: Click inside the button and type your call to action, like "Shop Now" or "Book a Table."

  4. Add a link: Click the link icon in the floating toolbar. Paste your URL or search for an existing page on your site. Press enter to save the link.

  5. Adjust the layout: In the right-hand sidebar, you can change the button size (Small, Medium, Large) or set the alignment to left, center, or right.

Styling your button

Once the button is placed, use the Block Settings in the right sidebar to match it to your brand.

  • Colors: Under the "Style" tab, you can set the initial color and the "Hover" color. The hover color is what customers see when they move their mouse over the button.

  • Border: You can make your buttons square or rounded by adjusting the "Border Radius." A higher number creates a more circular edge.

  • Typography: Change the font size or weight to make the text more readable. Bold text usually works best for buttons.

  • Icons: You can add an icon (like an arrow or a shopping cart) next to your text to give customers a visual cue.

Common ways to use buttons

  • Online Stores: Place a "View New Arrivals" button on your homepage to direct traffic to your latest products.

  • Restaurants: Use a "Download Menu" button or an "Order Online" button prominently at the top of your page.

  • Service Businesses: Add a "Get a Quote" or "Contact Us" button at the end of your service descriptions.

Troubleshooting

The button isn’t working
Check the link settings. Make sure the URL is complete (including https://) and that there are no extra spaces at the end of the link.

The colors don’t look right
If your button colors don’t match your brand, check your Global Site Styles. While you can change individual buttons, your site is set up with a primary color palette to keep everything consistent.

The button is too small on mobile
In the Kadence block settings, you can switch between Desktop, Tablet, and Mobile views. You may need to increase the font size or padding specifically for mobile users to ensure the button is easy to tap with a thumb.

Next steps

Now that your buttons are set up, you might want to look into:

  • [Setting up your Global Color Palette]

  • [Creating a Contact Page]

  • [How to use the Kadence Row Layout block]

Similar Posts