Build Your Own Business Website header image

Provide Support for Shortcodes & Widgets on Non-store Pages

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Next we’re going to look at providing support for shortcodes and widgets that are on non-store pages in a Thesis 2.3, WooCommerce store.

The beauty of Thesis 2.3 is that it only loads javascript and CSS on pages that you need it. But let’s say that you want to put the cart widget on what’s traditionally thought of as a non-store page.

Add Non-Store Pages

Let’s go over to Appearance and Menus. We’re going to add the blog page to the template. Let’s also create a testimonials page.

We’ll come over here to Pages and Add New. Testimonials. Publish. Let’s get from WooCommerce the commerce shortcodes. And we want the shortcode for the top rated product. Copy that and come over and let’s put it in our Testimonials page. Hit update.

Let’s take a look at the page. We’ve got a bunch of stuff here but not really displayed the way we would like it displayed. I’m going to show you the hard way to fix it and then the easy way. First off we need to know that it’s Post 117.

Advanced Option-WooCommerce PHP & CSS snippets

Then I want you to come over to my website, byobwebsite.com, and under Resources, Articles I have added two new things to the Thesis 2.3 resources list. I’ve added WooCommerce PHP snippets and I’ve added WooCommerce CSS snippets.

You can download those because we are going to talk about some of those here. Most of the time we’ll be talking about how to make these kinds of changes next. Let’s look at the PHP snippets one. I have 3 snippets here for you.

I have one which is a function to remove the default WooCommerce behavior on the product archive template. This is kind of an advanced thing that some store owners may want to do.

Thesis Control Over Product Archive Template

We’re not going to demonstrate it today but it actually will return control to Thesis over the product archive template which will still resolve to shop. If you go to that shop menu item it’ll go that product archive template but it you will have full control over it in Thesis now. That’s the first snippet.

Change Number of Columns on Shop Page

The second snippet let’s you change the number of columns that shows up on the shop page. You’re going to have some CSS to mess about with as well to make it work. But if you want to go to 3 columns instead of 4 or 2 columns instead of 4 you can use this function and change the number.

Add Scripts to Specific Pages

The third snippet adds scripts to specific pages. So, in this case it’s going to be if the page is a 117 then return false. In this context false means that the scripts will be added. I’m going to add that to my master php file. Go to Thesis and I’ve got this master php file here. If I paste that snippet, if is page in this case it’s 117. And if you had a bunch of them say 118,119.

If you know anything about template tags then you know is page will take lots of potential arguments. So you could use the template slug. There are all kinds of ways you could do it but that’s not really the purpose of this conversation.

In this case what we are doing is we want to allow the scripts to be loaded on that page specifically without loading it anywhere else. Now if you end up with a lot of pages, this is unwieldy but it nevertheless is a way to do it without resorting to the box that I’m going to show you and give you in a minute.

Let’s save this and upload it to the site. Thesis, WooCommerce. I’m going to upload that master to that file. Let’s view the page now and there it is. You can see it’s working because it added the CSS and javascript to this specific page and to no other page.

Beginner Option- BYOB-WooCommerce Optimizer Box

The easy way to do that is to use a box. In order to get this box all you have to do is send me an email asking me for it or if you are a member you can login and download it. If you are a member it’s under Member Benefits, Thesis 2.3 Boxes and it is the BYOB-WooCommerce Optimizer Box. All you have to do is download it.

Chris: Quick note about that box. It’s going to be perfect for everybody with Thesis 2.3.2. In the next version, whether that’s 2.3.3 or 2.4 – we don’t know yet, I have actually changed the script optimization behavior in WooCommerce and it is no longer automatic because too many people were trying to put widgets and stuff on pages that are not normally WooCommerce pages and they were not working. So instead of have Thesis be different that every other theme I’m going to just have it behave the same. So that initial expected outcome is met and then people can choose if people want to overlay that additional optimization.

Rick: But they’ll have the choice?

Chris: Yes. Except it’s a little less…it’s filter based so they’ll need to add a filter to their master.php or just use your box and I assume you’ll change it to give them the option to 1 click it.

Upload and Install the Box

Rick: Yes. Okay. So we come over to Boxes and Manage Boxes. Upload a box, go to wherever it is that you downloaded the box. Select it. Now Add it. Click the button, Save Boxes. If this is the first time you’ve seen a box installed, that’s how easy it is.

Once you’ve installed it, up under the boxes menu you have WooCommerce optimizer. You have the choice of undoing what Thesis 2.3 does currently which is to add the scripts everywhere which I think would be a mistake. We’ll come back and talk about photo gallery scripts later.

Add Scripts to Specific Pages

Or you have another choice if you go into the Skin Editor. Go to the Skin Editor. If you hover over the template and go to template options now you have a choice in the template where you can say “I want to include the WooCommerce scripts”.

Or you have the option of checking a box so that you can add scripts on a page by page or post by post basis. It’s a lot easier than using the hard way I showed above. Especially when that changes in the next version of Thesis.

If you are watching this and you have the next version of Thesis after 2.3.2 recognize if you hear me saying this I haven’t updated the video to reflect the change in that version of Thesis but I will.

With this you can specify either across the entire site, across all pages using a specific template or on individual posts or pages.

0 Comments… add one
0 comments… add one

Leave a Comment