How to Change Size of Site Title WooCommerce Storefront Theme

WooCommerce Storefront Change Size of Site TitleThe site title and tagline are very important in any WooCommerce Store. The Storefront theme allows you to add these two key things. The site title is considered as your website name whereas the tagline is usually a brief sentence about the website.

WooCommerce Storefront Change Size of Site Title

They serve as an introduction to your website content. Moreover, the site title and tagline can be used to point out to visitors what your store is all about in quite a brief way. In the Storefront theme, they are located within the top-left position within your website.

SIte title : WooCommerce Storefront Change Size of Site Title

In this screenshot, the site title is “Woo Dev” and the Tagline is “Njengah.com WooCommerce Tutorials”. Both of them are quite relevant especially when it comes to Search Engine Optimization (SEO). This means that it is important to have a strong and catchy title and tagline.

In this brief tutorial, I am going to show you how you can change the size of the site title with some CSS modification.

Steps to Change the Size of the Site Title in the Storefront Theme

Here are the simple steps that you should follow:

  1. Identify the Element you need to Change

Simply right-click on the area you want to change in a browser like Chrome or Firefox and click “Inspect Element” like this:Inspect Element

After clicking on that, this will bring up the console containing the various elements of the page on the left and the settings for those elements on the right. Now you need to find the element that targets the cart icon and we can add a new rule.Identifying element for the site header title

To select the element, click on the element picker as shown in the screenshot. Then point the cursor to the menu element to check the styling.

  1. Choose your Desired Size

Now that the hard work is done, the next step is to enter your CSS rule. You need to enter something like “font-size”, press tab, and type in the size you want.Adding rule for the site header

I have changed the size to 20px, and you can see that the site title size has increased. You can experiment to get your desired size and if you are satisfied with your changes, it is time to make it permanent.

  1. Extracting the New Rule

You need to extract the rule by right-clicking it (on Firefox) like this and selecting “Copy Rule”:Extracting the rule for the site title

However, if you are using Chrome, you can just select the entire rule with your mouse and copy the text. Paste it into an editor and delete all the existing rules except for the new one you just added if there are any.CSS Rule 3

  1. Adding the Rule in the Additional CSS Section

The remaining part is to copy/paste into the “Additional CSS” section of your Storefront theme customization interface. To do this:

  • Log into your WordPress site and access the Dashboard as the admin user.
  • From the Dashboard menu, click on Appearance Menu > Customize.
  • Navigate down to Additional CSS in the left sidebar that appears.Additional CSS
  • Copy the CSS rules from the text editor and add them as shown below:outcome for Site title
  • If you are satisfied with the changes, click on Publish.

Conclusion

In this post, I have shared four steps that you need to follow to change the size of your site title in your WooCommerce store. You only need to identify the right element and the right rule to change. After that, you need to add a rule in the console area, but this does not make any actual changes to your site. It allows you to experiment with your rules and see them in action before implementing them on your site.

Moreover, I have shown you how you can extract the new rule and paste it in the Additional CSS section of your Storefront them customization interface. By now, I am sure you can change the size of any element on your site!

Similar Articles

Comments are closed.