Woocommerce Custom Pages

[cfunkyk]

Jason,

I’d like to create some custom woocommerce pages to go with my site. For instance, if I wanted to do an awesome, full-width, branded landing page to describe, sell, and checkout using one newly created custom themeblvd layout, how would I go about doing this?

I know where the woo commerce templates are, and I know where your templates are. There is somewhere along the middle or combining them that I get stuck. I’ve been able to set and use the widget areas, but some other bugs pop up that are not acceptable.

Any one else want to share some knowledge on the subject?, please be a friend!

Disclaimer (I’m ready to be shot down):
I fully understand that his is probably way past the scope of your forum, but I wanted to try anyways. I really appreciate everything you do.

Topic

[Jason Bobich]

Hi,

Yeah, I’d say actually creating custom child theme templates for WooCommerce is a bit outside the scope of the forum. In all honesty, you’re not really dealing with Jump Start any more, you’re more digging into the actual template files of WooCommerce.

I just read the message you sent privately… If all you’re trying to do is display some page as full-width, that’s really easy. It doesn’t require changing any templates or anything. You’re just filtering the value in the Theme Blvd global config when any page loads on your site.

See “Manually adjusting which sidebar layout is used”:

http://dev.themeblvd.com/tutorial/sidebar-layouts/

And did you see you have options for the sidebar layout of WooCommerce pages in your theme options? Appearance > Theme Options > Plugins

Alternatively, utilizing WooCommerce shortcodes and the layout builder I think you can create things that are more complex, as well. This is how I created the homepages of the shop demos:

http://demoblvd.com/themes/jumpstart-2/demo-5

http://demoblvd.com/themes/jumpstart-2/demo-7

… I just added “Content” elements to a custom layout and put in WooCommerce shortcodes into them.

[Jason Bobich]

Furthermore, tackling all this programatically. It doesn’t matter if a WooCommerce page is loading or anything else, you’ve still got all the same action hooks:

http://dev.themeblvd.com/tutorial/primary-framework-action-hooks/

Anywhere you want to hook an output some custom content you can. You’d just use woocommerce conditionals to determine if you want to output on a given page for whatever action you’re hooking to.

http://docs.woothemes.com/document/conditional-tags/

For example:

function my_shop_banner() {
	if ( is_woocommerce() ) { 
		echo 'My Shop Banner...';
	}
}
add_action('themeblvd_header_after', 'my_shop_banner');

[cfunkyk]

Thanks for all of this, but I can see my exact question needed to be more detailed. This is really helpful and gets the job done in most circumstances. Yes, I am more interested in merging the woocommerce templates and events calendar pro templates with your so I can build them using the custom layout builder you have going on.

I guess the easiest way to explain/ask what I was to do is:
I would like to use woocommerce or the event calendar plugin in your custom layout pages so that I can use the template builder, widgets, and our page creation tools to control most everything on the page through the jumpstart system. (does this make more sense, sorry, the full-width page was a terrible example).

For instance, there is a one page checkout plugin for woo that gives decent options for a one page checkout but you must use a shortcodes to show the list of products you want the user to buy on the same page.

If I take that shortcode, and put it in a custom template of yours. In a content widget, with no other widets or anything on the page, then the woocommerce is lost. The products don’t show but the contact form still does. I run into issues where I am pulling things outside the woocommerce loop (don’t know how else to say it) so they don’t work.

So from what you may be saying, is that if I work the woocommerce conditionals into a page (cutom layout), then it may hold/register the woocommerce that has been ‘forgotten’?

There is just one piece I am missing with this because i did this awhile back with the event calendar- event calendar pro. I hacked it so I could create a TB custom layout page for the venue page., The issue is it will not recognize the meta tags, og:image, none of the regular page settings, but I was alble to use your template builder to build out the page a lot more. I know there is one piece of something that I am missing that would allow me to integrate these page templates with your custom template builder.

Sorry for the long response, and I know its off-topic, but I really appreciate all your time, effort and help. I am a-ok with you turning me away on this topic because it definitely doesn’t fit your forum.
Thanks. Thanks. Thanks. Anyways.

[Jason Bobich]

I’m honestly at a bit of a loss with most of what you’re trying to describe I think. If you have some shortcode for any plugin, I don’t understand why it wouldn’t work when put into a layout. I’ve set things up so a content element of the builder runs do_shortcode(), and shortcodes will get processed. It’s fairly elementary in terms of WordPress.

I just linked to examples where I’m putting WooCommerce shortcodes into a custom layout? They all seem to work just fine? What do you mean WooCommerce is lost? When you use a WooCommerce shortcode, it is creating its own loop that starts and finishes within that shortcode.

Now, obviously I have no idea what your calendar plugin and one-page checkout plugin are doing. So, I can’t really tell you much on those. But if they have a shortcode that’s been setup properly to WP standards with add_shortcode(), then it should work.

Now, also, you keep saying “widget” — Do you mean you’re incorporating a widget area into your custom layout and using a “Text Widget” or something in there?

Or when you say widget are you are talking about the actual “Content” element of the Builder? I’m talking about putting a content element of the builder; I’m not talking anything about what WordPress refers to as “widgets” — WordPress widgets do not process shortcodes, by default. Are we on the same page there?

[Jason Bobich]

It’s probably worth mentioning that if there’s anything that does require that you programmatically output something in the form of a Builder element, you can create custom elements that will show up in the builder.

http://dev.themeblvd.com/tutorial/add-remove-builder-elements/

/**
 * Add "My New Element" to available elements 
 * in builder. It will have no options.
 */
themeblvd_add_builder_element( 'my_new_element', 'My New Element', 'none', array(), 'display_my_new_element' );

/** 
 * The display for when "My New Element" is in a layout
 */
function display_my_new_element() {
    echo 'See me in your custom layout?';
}

… but so far everything you’ve described seems like more a confusion of what you’re doing in the WP admin, but I can’t say for sure I’m following everything 100% though.

[cfunkyk]

Yes. I refer to thing a bit weird soemtimes/most of the time.

Widget is what I call the items in your layout builder now, I believe you call it elements. They are all functions that go in a ‘row’ or widget area – what you call a section. I force do shortcode in all my widgets and excerpts. (Ask more here if needed, but as far as I know, we are on the same page.

What I want, I am probably going about wrong, so there’s my disclaimer. I would love to learn how to put in new builder elements as you described in you most recent email, but I felt that was above my head.

So, each of these plugins as their own template pages available to much with. I was to be able to take that venue page from the templates and make it a custom layout page template, where it is still a venue page, be we can customize the layout, put it in a ‘section’, build around it with elements. Does this make sense? I’ll give an example:

I create an event page for the site. I create a custom template in the builder, I set that as the custom post layout. It gives me the widgets I want, it gives me some event information, but it strips the ‘juicy’ parts like the dates, meta data og:image, the next event and past event buttons, etc.

I just want a way to manage those pages using your template(s). I felt that it would be an easy process of adding the import php from the even’t template page into a new copy of one of your custom template pages (that I could then use as wp page templte). I couldn’t get it to work because I am not that good.

Like I said, the page I have is ok, but leaves a lot to be desired. I would like all the normal event calendar/woocommerce fuctionality available with your page buidler. (I really think this is easier than I am making it, I am probable going about it the completely wrong way.

If you look at this page:
http://www.obxpridefest.com/event/friday-late-night-free-dj-dance-party-with-male-and-female-dancers/
You can see that the event page come across, I have widgets/elements from your theme, but it lacks the event info, etc. I don’t want to bog this down too much, but if you look at that page source: none of the wp seo settings came with it, no meta data, no og:image etc.

What can I do with this, or in these situations? It seemed to me like I need to meld their page template (php file) into our page template (php file).

I’ll follow up with my other woo example in a min. Thanks.

[cfunkyk]

As a very quick and brief follow-up to the woo side of things. If I use this shortcode on a page:
[woocommerce_one_page_checkout template=”product-table” product_ids=”62,33,63,64,70″]
It lists out those products and the chekkout and payment all on one page.

If I create a custom page layout (themeblvd), create a section, put in a content element (widget), then this shortcode breaks a little. It will not display the product table, but it still does put a checkout form on the bottom of the page.

More to come….

[Jason Bobich]

Communicating online in text can be a confusing… ha for clarity, you should try and use the terms that are used within the interfaces you’re discussing. For example, in WordPress “widgets” are a specific thing with a specific purpose, as labeled throughout your WP admin. There’s a reason in the Layout Builder, I don’t have a button that says “Add Widget” — this would be extremely confusing!

=====

Hm, well it sounds like the issues you’re having are quirks with the two specific plugins you’ve picked, combined with the layout builder… which is the natural course of developing a site where you’re trying to combine 3rd-party items, I suppose.

But the overall concept of incorporating extended items with the layout builder I think is the bigger thing to note here:

1) Plugin shortcodes: If a plugin has a shortcode, you should be able to put it in a content element of the builder and have it output.

2) Your own shortcodes: If you need to output something programmatically, you can always think about making your own shortcodes. https://codex.wordpress.org/Shortcode_API … which many people that have been developing with WordPress will find familiar.

3) Custom elements: And lastly if you’re willing to look at the developer docs specific to our framework, you’ll see there’s a way to create completely custom builder elements. This could be as simple as making an element with no options and just outputs something, or having an element with a bunch of user options. http://dev.themeblvd.com/tutorial/add-remove-builder-elements/

=====

I create an event page for the site. I create a custom template in the builder, I set that as the custom post layout. It gives me the widgets I want, it gives me some event information, but it strips the ‘juicy’ parts like the dates, meta data og:image, the next event and past event buttons, etc.

This sounds like an issue with how your events plugin works (combined with the layout builder). I wouldn’t even know where to begin, not knowing anything about the plugin or how it works. So unfortunately, the two may just not work together.

=====

If I create a custom page layout (themeblvd), create a section, put in a content element (widget), then this shortcode breaks a little. It will not display the product table, but it still does put a checkout form on the bottom of the page.

This sounds like it may be just some sort of frontend styling issue of the this specific WooCommerce plugin output in the content of whatever surrounds the layout builder.

To troubleshoot, I’d create two pages on your site — one with layout builder and one without. Then, I’d compare the two pages with your browser’s inspector. First, confirm that they both have all the same HTML markup being outputted. If so, it means there’s probably a CSS quirk somewhere. Try and identify what CSS is effecting what element of the one-page checkout system that’s different on the page with layout builder.

[cfunkyk]

Ok, so maybe this will help clarify a handful or portion of this. I understand the testing, and I figured out why the images were showing in one spot and not in your template builder. Besides the point now, because here is a very straightforward situation that should help explain where I’m coming from and potentially help me learn what I need.

Lets say in the newest version of JumpStart, with all the plugins updated, etc. etc. I setup a product page. It defaults to a not-great page-layout with a sidebar. I want to make this page a fullwidth product page without a sidebar. How do I accomplish this?

I created a custom page template, only added one element, ‘content from current page’. Technically, one would think that this would put the woocommerce product page into a full-width page, and all the regular woocommerce pricing, tabs, gallery, etc. would be included. None of it is. So how would I go about making this a reality?

Thanks.

[cfunkyk]

Ok, dumb question b/c you worked that into the settings tab over/under there. OK, got that part. I’ll be back on this.

[Author]

Replies