Setting Up Your Theme

Up until this point, we’ve focused on what your store can do. But just as important as what your store can do is how your store looks. Do you want a vibrant and fun look or a clean and minimalist look? Each will cater to a different audience.

In this chapter, we’re going to look into how you can control the important visual aspects of your store. We’ll dig into the following:

• Choosing a theme for WooCommerce
• Rearranging the product page
• Adding a product data tab

By the end of this chapter, you should know how to choose a theme built for WooCommerce, customize the appearance of your store so that your store reflects your brand, add a product tab, and install a plugin to see the frontend hooks.

The first thing we’re going to explore is choosing a theme for your online store.

Choosing a theme for WooCommerce

There are thousands of themes on WordPress.org but not all of these themes are going to work well with WooCommerce. Many of them are designed for brochure websites or blogs. We want a theme that has space for lots of products and ample space on the product page for product details.

We’re going to take a look into some of the most popular themes for WooCommerce, including the following:

• Twenty Twenty-Four
• Storefront
• Astra

We’re going to look into how to set up each of these themes and the benefits of each one. First up is Twenty Twenty-Four.

Exploring the Twenty Twenty-Four theme

Twenty Twenty-Four is the most recent version of the default theme released with WordPress. Each year, WordPress releases a new default theme and the current version is Twenty Twenty-Four (https://wordpress.org/themes/twentytwentyfour/). All of these themes are available for free and they’re a great place to start any WordPress...

Rearranging the product page

It’s very common for store owners to want to customize the frontend of their store. They might really like the look of the product page, but they want to rearrange certain elements.

In this section, we’re going to install a plugin to help us understand how the WooCommerce code works so that we can modify it.

As an example, let’s say we take a look at our product page, and we don’t think listing the category is important for our store. We could move that lower down the page. But how would we even begin to do that?

In the following screenshot, how do we move the product price lower down the page? Take a look:

Figure 10.14: I’d like to move the price lower down the page

The answer is simple but not easy. The first thing we have to do is find where this code is coming from and how it’s being displayed on the page. We could go through thousands of lines of code in WooCommerce or...

Adding a product data tab

WooCommerce has a nice tab system on the product page. It’s the perfect place to add custom information to your product. If you have extra information that you really want to share with your audience rather than burying it in the product description, you can add it to a custom tab.

This can be done with code but there are also several easy-to-use plugins. We’re going to use Custom Product tabs for WooCommerce since it’s free. But there are more powerful paid plugins available.

We’re going to install a custom tab plugin and then configure that plugin.

Installing a custom tab plugin

Let’s start by installing the right plugin. Follow these steps:

1. In your WordPress admin, go to Plugins | Add New.
2. Search for Custom Product Tabs for WooCommerce, as seen here:

Figure 10.21: Installing Custom Product Tabs for WooCommerce

3. Install and activate the plugin.

Adding...

Extensive customizations using child themes

We talked a lot about how you can customize your theme using the customizer, using hooks, and installing additional plugins. There’s one more common way to customize your theme that’s really useful for sites that want to customize every aspect of their store. That’s using a child theme (https://developer.wordpress.org/themes/advanced-topics/child-themes/).

I like to think of a child theme as a second draft. You choose a theme to be the parent and then you modify from there. You could choose any WordPress theme as the parent, and I would suggest starting with one of the three themes we already covered in this chapter.

Then, in the child theme, you can customize the styling (CSS) and the functionality (the hooks).

One of the most important benefits of a child theme is that it allows you to update the parent theme and bring in new changes while still keeping your modifications intact.

An additional benefit is...

Summary

Customizing the frontend of your store is important. It’s what people see and remember, and there are lots of ways to do it. By now you should be familiar with three of the most popular themes for WooCommerce and you hopefully installed one of these themes. You also know how to look at the front of your site with a hook visualizer so you can see where certain code actions are taking place. With plugins, you can customize the tabs that appear on the product pages. You now know how to customize your own store after reading this chapter.

In the next chapter, we’re going to look into customizing specific parts of the product page with functionalities you might not have considered.