The 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.
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:
- 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:
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.
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.
- 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.
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.
- Extracting the New Rule
You need to extract the rule by right-clicking it (on Firefox) like this and selecting “Copy Rule”:
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.
- 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.
- Copy the CSS rules from the text editor and add them as shown below:
- 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
- What is WooCommerce Storefront Theme ? [Answered]
- How to Send to Mpesa WooCommerce Payment for Free
- How to Redirect a WordPress Page Without Plugins?
- How to Remove Email Footer Text ‘Built With WooCommerce’
- How to Change the WooCommerce ‘Added to Cart’ Notice
- How to Change Checkout Button Text in WooCommerce [Place Order]
- How to Make Divi Mobile Menu Scrollable Quick Fix Solution
- How to Change Size of Cart Icon In WooCommerce Storefront Theme
- How to Adjust WooCommerce Storefront Height of Header
- How to Change Proceed To Checkout Text In WooCommerce
- How to Create My Account Page In WooCommerce
- How to Count Items Added to Cart WooCommerce Cart Count Code
Comments are closed.