If you are wondering about how to change shop page title in WooCommerce, then you have come to the right place.
The shop page is one of the most important pages in any eCommerce or WooCommerce store. You display all your products here, so the page should be visually appealing and have a user-friendly design.
By default, the WooCommerce shop page is titled “Shop“. It is natural for site owners to change that into a more descriptive and engaging title that reflects their brand.
We have prepared a guide today that will go over the details of changing the WooCommerce shop page title. Also, we will add some bonus customization tutorials that will help you make your WooCommerce site more efficient. All in all we will cover,
- How to change the shop page title in WooCommerce
- How to make the WooCommerce product page full width
- How to reset order numbers in WooCommerce.
But first, let's go over,
Why Change the Default WooCommerce Shop Page Title
As we said earlier, the shop page is one of the most visited pages on the site. Moreover, how you design your shop page will help create your brand image for the users. You have to be very careful while customizing your product page.
However, when you install WooCommerce, the plugin will automatically create the necessary pages like shop page, account page, checkout page, and more.
You can change the default “Shop” page to any title you want. You can give it a name like “Products” or “Available Products” etc. The title should be something descriptive and engaging that will help create a better shopping experience for the customers.
The benefit you will get by customizing the WooCommerce shop page title is,
- It will help with the WooCommerce search engine optimization. If you have any idea about how Google and other search engines work, then you probably know that they look at the words used in page titles to determine how to rank them in search results.
- When you have a descriptive title for your shop page, it will help you get more traffic to your online store. If you want you can add a keyword to the shop page title to boost the traffic.
- And when you get more traffic, it will increase your conversion rate.
With that in mind, let's see the methods on how to change shop page title in WooCommerce.
How to Change Shop Page Title in WooCommerce (3 Easy Methods)
As WordPress is open-source software, there is a lot of scope for customizations. And with the right customizations, you can have your site stand out from the rest.
For this WooCommerce customization also, there are three methods you can use,
- Change the shop page title using the WordPress settings
- Adding a custom code to the Function.php file to change the shop page title
- Using a WordPress plugin to change the shop page title.
We will show you all the 3 methods.
Method 1: Change Shop Page Title Using WordPress Settings
If you are looking for the easiest way to change the WooCommerce default shop page title, then this is the one. You can tweak the shop page title using the built-in settings in WordPress.
- Go to the Pages–> All pages from your admin dashboard. You need to find the page that has the label “Shop – Shop Page”. Click the Edit button. You will find the option when you hover over it.
- Now all you need to do is enter a page title of your choosing by replacing the default WooCommerce title. Make sure to click the Update button when you are finished.
This is what the page will look like and the updated title will appear in the navigation menu as well.
So simple. Let's see method number 2.
Method 2: Adding a Custom Code to the Function.php file to Change the Shop Page Title
There are many WooCommerce themes that might not give you the scope to change the shop page title. Or you may need to purchase the premium version in order to make the necessary changes. To tackle that problem, you can use custom coding.
You can add the code we will provide you to your theme's function.php file to make the changes. Here are the steps.
- First of all, you need to create a child theme. Because you will need a child theme to make adjustments to the file, as this enhancement is related to the theme. Creating a child theme is very easy. You can follow this article to create a child theme. You will also find plugins in the WordPress repository to create a child theme.
- Next, you need to add the below custom code to your child theme's functions.php file,
add_filter( 'woocommerce_page_title', 'new_woocommerce_page_title');
function new_woocommerce_page_title( $page_title ) {
if( $page_title == 'Shop' ) {
return "Boutique Shop for Upcoming Designers";
}
}
Make sure to replace the title of your shop with your preferred one. However, this method will only change the title of your WooCommerce shop page. It will not change the shop page URL or WooCommerce breadcrumbs.
Note: If you want to hide the WooCommerce shop page title, just add the below code to your functions.php file and you will get the desired result.
add_filter( 'woocommerce_show_page_title', 'njengah_hide_shop_page_title' );
function njengah_hide_shop_page_title( $title ) {
if ( is_shop() ) $title = false;
return $title;
}
Method 3: Using a WordPress SEO Plugin to Change the Shop Page Title
Last but not the least, if you don't feel confident in tweaking the WordPress settings or adding a custom code to your site, then you can change the WooCommerce shop page title by using an SEO plugin. You can change the title that shows up in the search engine, which is called the SEO title or title tag.
This can prove to be a great way to generate more traffic and increase the conversion rate.
To achieve this feat, you can use the popular SEO plugin Rank Math. Here are the steps,
- We are hoping you have already installed the Rank Math plugin on your site. Now open your shop page and scroll down to the Rank Math SEO meta box. Click on Edit Snippet as shown below.
- Add your updated Shop page title in the Title section and update the page.
- Now you can see your updated shop page title on your online store.
There it is, these are the preferred ways to change the WooCommerce default shop page title.
FAQ(s) Regarding Changing WooCommerce Shop Page Title
Got to WooCommerce–> Settings–> Product tab. There select the new shop page from the drop-down menu.
From the dashboard menu, click on Pages > All Pages. Click on the Checkout Page link. Change the name of the title, and click on the Update button.
Go to WooCommerce » Settings and click on the ‘Advanced' tab. Then, select the new WooCommerce checkout page URL from the drop-down menu. Make sure to click ‘Save changes' at the bottom of the screen
But wait, this is not the end. Remember we said that we have also included some bonus parts to this article, let's see them, shall we?
Bonus Customization 1: How to Make WooCommerce Product Page Full Width
WooCommerce product or shop page is a very important page for any eCommerce store. It is important that this page doesn't have any design that distracts the customer.
Many users have been asking for solutions on how to make WooCommerce product page full width and remove sections like sidebars or recent blogs.
They want to keep the product page clean so that customers can fully focus on the products. It has the possibility of increasing conversion rates. We have come up with a simple solution that will help those users make their WooCommerce product page full width.
- Open your site's child theme's style.css file and paste the below code,
.single.woocommerce #primary,
.archive.woocommerce #primary {
width: 100%;
}
- Go to your product or shop page and refresh your site. You will see that your product page is now in full width.
This is how you can make your WooCommerce product page full width.
FAQ(s) Regarding Making WooCommerce Product Page Full Width
Yes, you can. You will have all the tools to edit the design and functionality of product pages.
Just click on the element's Edit menu, and change its layout from the default Boxed to Full Width, and your content will now stretch fully between the vertical edges of the page.
Go to Appearance > Customize > WooCommerce > Product Catalog. Now choose what to display on the main shop page. Then, select Show categories to have product categories displayed on your shop.
Bonus Customization 2: How to Reset Order Number in WooCommerce
Unfortunately, WooCoomerce doesn't have basic settings to edit order numbers. So many users were looking for alternative ways on how to reset order numbers in WooCommerce. Well, we have found a solution that will help them to do exactly that.
- Open your child's theme's function.php file and paste the below code,
add_filter( 'woocommerce_order_number', 'change_woocommerce_order_number' );
function change_woocommerce_order_number( $order_id ) {
global $wpdb;
$prefix = '/RM/';
$suffix = '/TS';
$order = wc_get_order( $order_id );
$order_date = $order->get_date_created();
$date_created = $order_date->date( 'Y-m-d' );
$query = "SELECT ID FROM {$wpdb->prefix}posts WHERE post_date LIKE '%".$date_created."%' AND post_type='shop_order' ORDER BY ID ";
$result = $wpdb->get_results( $query );
$count = 0;
foreach( $result as $index => $id ) {
if( strval($order_id) == $id->ID ) {
$count = $index + 1;
break;
}
}
$new_order_id = $count . $prefix .$date_created. $suffix;
return $new_order_id;
}
- This will reset the order number from 1 again. Here's what the previous order numbers looked like,
After adding the code, this is what the order number will look like,
Note: If you want to reset WooCommerce orders to 1 after every 24 hours, then you need to add the below code to your functions.php file,
public function change_woocommerce_order_number( $order_id ) {
global $wpdb;
$prefix = '/RM/';
$suffix = '/TS';
$order = wc_get_order( $order_id );
$order_date = $order->get_date_created();
$date_created = $order_date->date( 'Y-m-d' );
$query = "SELECT ID FROM {$wpdb->prefix}posts WHERE post_date LIKE '%".$date_created."%' AND post_type='shop_order' ORDER BY ID ";
$result = $wpdb->get_results( $query );
$count = 0;
foreach( $result as $index => $id ) {
if( strval($order_id) == $id->ID ) {
$count = $index + 1;
break;
}
}
$new_order_id = $count . $prefix .$date_created. $suffix;
return $new_order_id;
}
By changing the order number your competitors won’t be able to guess the number of orders you have received till date based on the order id.
Read: How to Add Custom Order Status to Your WordPress Multivendor Marketplace
So, this is how to reset order number in WooCommerce.
FAQ(s) Regarding Changing WooCommerce Order Number
The way it works is that every item in the WordPress database is given a unique ID number, which is allocated sequentially. This includes orders, pages, posts, images, etc.
You can find order numbers by using this function: $order->get_id(); That should return the order id without “#”
If you want the WooCommerce order then you can use the get_data() function. It will return the data as an associative array and we can use this array with key=>pair value.
Make the Necessary WooCommerce Customizations to Increase Your Conversion Rate!
We are at the end of our article and hopefully, you know,
- How to Change Shop Page Title in WooCommerce
- How to make the WooCommerce product page full width
- And how to reset order number in WooCommerce.
Using the customizations we mentioned in the article, you can stand out from the crowd. Also, it will help make your WooCommerce site more efficient and user-friendly. If you have any queries or confusion regarding the methods do let us know in the comment section.