Selling online can be different: using only the Woocommerce plugin or by adding additional full-featured plugins to display products in different ways, for example, in the table. You can use all methods at once or add them gradually, attracting more and more customers and developing business. But all display methods are aimed at one goal – to create a favorable shopping experience for your potential customers, thereby increasing the conversion rate of your online store.
As you know, to buy something in the online store, you need to mark the desired item and click “Add to Cart” or “Buy.” Today, we will talk about this most important button in your store.
How to use it? When should you write “Add to cart” or “Buy ” and when to just leave the “cart” icon on the button? Find out about the best button design options and more.
How does the “Buy” button work?
The “Buy” button is a tool that can be applied to any product from your store. Moreover, with, for example, WooCommerce Product Table, you can add a Buy column and customize all options and button design (e.g. select quantity customization, add many items at once, set individual button text for each product type, and create a stylish design).
The advantages of the Buy button from WooCommerce Product Table:
- Ability to fully customize the color and design according to the design of the page, which makes it look natural on the site.
- Size is optional; so, the photo always looks harmonious.
- It is possible to choose the design: to add or remove the frame, show the price independently or on a button.
- The possibility to make different labels on the buttons for various types of goods at the same time.
- Buttons for each product variation.
- A pop-up button for product options.
- The visitor of the store sees the product while scrolling and can add it to the cart while remaining on the same page and continuing the shopping process.
An example of using some of the Buy button options in the Product Table:
How to sign the Buy button?
There are many possible ways of doing this, but let’s review the main ones:
–Buy. It would be logical to write the text “Buy” on the button in the Buy column if, after clicking it, the product is added to the cart and the user is immediately sent to the checkout page. It is the case for online stores in which people rarely buy more than one item. Most often, this method is useful for stores with products without additional accessories, for example, a fur coat store for women, the service industry, or an automotive catalog.
-Add to cart. This option is for products that do not require the users to make a decision to purchase immediately but allow them to continue shopping on the same page. This option is more suitable for electronics stores, clothing stores, and underwear stores because there, people often buy more than one product at a time.
For this option, the pop-up notification of adding items to the cart is often used. Read about it below.
With this caption, it’s not recommended to direct customers to the cart after clicking on the button; it’s better to display a notification of adding to the cart.
– Icon on the button. This method is ideal for stores selling something inexpensive and ordinary as the buyer will not compare or choose another product; therefore, there is no need to clutter up the store with redundant information.
Add to cart icon is mostly suitable for restaurants with food delivery, grocery delivery, online stores of small household items, or payment for all sorts of subscriptions in online schools.
– Different titles for different types of goods. With the WooCommerce Product Table plugin, you can name each button for each product type differently. This is convenient because, for example, for the goods with variations, it would be logical to choose a variation before adding it to the cart, etc.
This method is ideal for stores that have a lot of different types of products because the individual approach will positively affect conversion.
Read this article to learn more about it.
There’ no point in arguing because the approach to each individual store is different, but we have provided our recommendations in this regard above. If adding an item to the cart is the desired conversion, the button should be called exactly like that, but later, don’t be surprised by abandoned carts. If you consider a completed order as a conversion, then you shouldn’t be afraid to write “Buy.”
Notifying the user about adding an item to the cart
In the WooCommerce Product Table, you can fully customize the notification of adding an item to the cart.
If you use the word Buy for a button that sends the user to the cart after clicking on it, there’s no point in having a notification – the user will already see the cart with the added product.
For a case when the user remains on the shopping page, and the product is added to the cart, there is a need to display a notice because if the user clicks the button and nothing happens, he/she would be confused and would not understand anything (whether an item has been added to cart).
Here are the basic recommendations for displaying a notification after clicking the button:
– The main rule – it must be obvious that the action is done. The notification should be displayed if clicking on the button does not take the buyer to the cart.
-When clicking on add to cart, the color of the button should change.
-A notification should be displayed in a spot that the user will notice right away.
-The “View cart” button should be always available for the user to see what he/she has added to the cart.
-Remember about the mobile display. Many obvious issues are often left unnoticed, such as no information that an item has been added to the cart although this information is visible in the desktop version.
Buy button style
- The perfect color for the Buy button
It is difficult to say which color is ideal for your store as it depends on the style of your theme and many other factors. Typically, green, red, and blue are the most popular colors for displaying the button.
Here are a few color recommendations:
– Do not choose dull, dark shades.
-It is better to choose a color that is in contrast to the general background.
-Be careful with the gradients and shades because the button should attract attention and not scare customers away. It should not look like it has already been clicked.
- Mouseover the Buy button. Make your button look not only efficient but also spectacular. With the WooCommerce Product Table plugin, you can fully customize how the button will look like on mouseover:
-Font
-Background
-Borders
- Size of the Buy button. If the user can’t click the button or accidentally hits another element while trying to click it, this causes irritation and a negative experience.
For interactive elements on most platforms, sizes from 48×48 dp are suitable. Dp (Density-independent Pixels) is an abstract unit of size, which allows elements to look the same in different resolutions. Common pixels (px) may appear differently on various screens.
- The font of the Buy button. Don’t use too big or small font size. 16pt is the best option. It is also worth mentioning that too thin font style can be poorly readable.
- A separate caldron in hell awaits all designers who use CAPS for absolutely all buttons.
- Are you comfortable reading a book with ALL the text written in UPPERCASE? Not so much for the user either. Also, if you’re not good at typography, try not to use complicated serif or slant fonts. It’s difficult to combine them with other fonts; so, try something simple and common like Roboto, San Francisco, or Montserrat.
We also recommend you read this article to learn how to configure all these options in the most efficient way using the product table plugin.
Conclusion
Remember that either the Buy or Add to Cart button is not just another button in your store. This is exactly the tool that leads the potential customer to the very purchase, thanks to which, the conversion of your store will grow, and you will happily calculate the income.
Therefore, it is worth taking a careful approach to the issue and deriving the ideal formula for the button EXACTLY for your store through experiments and statistics of the use of your store.
To do it right, you need to understand what to do and, most importantly, why it is better to choose one method and not another. I did not dwell on each option and only showed the most popular ones and briefly described when it is worth using them and when it is not.