As I understand by default Woocommerce shop page uses product archive template. What I am looking for, is to use a custom template for shop page.
Here is what I did:
Create template "my-shop"
Create page "My shop" -> choose template "my-shop"
Choose "My shop" as Woocommerce shop page
But none of the changes I made to "my-shop" template are present on the shop page.
What am I missing here? I would not like to change product archive itself, just the shop page.
Is there a way to disable product archive from being a default for shop page?
Thanks
I know it's too late and you may have figured it out by now. In any case, the changes that you would like to make to the WooCommerce Shop Page need to be done in the archive-product.php and it would be safer to create a child theme and do these changes. Making enhancements and customizations in a Child theme is best practice so that you can update the parent theme at any time and it won't affect your store.
I hope this helps, for more information on how you can use WooCommerce short-codes to customize your store can be found here.
To add to Silver Ringvee's answer - he used is_page but that only works on wordpress pages. For woocommerce you need to use something like is_woocommerce() . See Woocommerce conditional tags page.
My example code uses the is_shop conditional tag as that was the page you wanted to change. the code get_template_part( 'content', 'shop' ); will call the file content-shop.php in your theme root folder. This code is to be added at the top of wp-content\themes\*theme*\woocommerce\archive-product.php that you can copy from wp-content\plugins\woocommerce\templates\archive-product.php
You can add it just before get_header( 'shop' ); line 23 in my file - and the entire page will be drawn from your template. If you want to keep the header of the shop page, then put this code after the get_header code. Remember to include a footer in your file as well
if (is_shop()) {
get_template_part( 'content', 'shop' );
} else {
#normal archive-product code here
}
The solution (not perfect) that I figured to work best, until someone finds a way to actually change the template from dashboard:
Adding:
<?php
if (is_page( 'Page Title' ) ):
# Do your stuff
endif;
?>
to content-product.php in my theme's woocommerce folder.
If you prefer to go with code, you can create a redirect from the original shop page to your page via wp_redirect.
add_action('template_redirect', 'bc_010101_redirect_woo_pages');
function bc_010101_redirect_woo_pages()
{
if (is_shop())
{
wp_redirect('your_shop_url_here');
exit;
}
}
More detailed tutorial can be found here
This is not possible to create custom template for shop page , just copy and paste woocommerce Templates into you theme folder and Try to work in content-product.php template .
Related
I am creating a custom theme and I have copied the file content-product.php to my theme folder. There I have made changes to the html structure and css. I can load of list of products and see the changes working via the short code [products].
However elsewhere on the site I want to display another list of products but from a different category. I would use the shortcode [products category="special category"] These products should be displayed using a different template.
My question is: Where can I inspect the shortcode query? and how can I conditionally load a different template depending on which products are being displayed?
In my themes functions.php file I have started to extend the [products] shortcode like this:
function my_wc_shortcode_product_query_args($args, $atts){
if ( isset( $args['category'] ) && $args['category'] == "Daoine Óga") {
var_dump($args);
// Tell Woocommerce to load my custom template instead of the my-theme/woocommerce/content-product.php
}
return $args;
}
But I'm not sure how I can return or get woocommerce to display my custom template at this point.
The woocommerce file that creates the [products] shortcode can be found at plugins/woocommerce/includes/shortcodes/class-wc-shortcode-products.php
Make a folder in plugins folder called custom-product-templates and make a copy of the woocommerce file class-wc-shortcode-products.php to that folder.
Add the plugin comments to the top of that file:
/*
Plugin name: Custom Product Template
Plugin URI: https://anirishwebdesigner.com
Description: Display custom product templates in woocommerce loop
Author: Linda Keating
Author URI: http://anirishwebdesigner.com
Version: 1.0
*/
Navigate to localhost/wp-admin in browser and to the plugins and activate newly created plugin
I can now safely edit that file so that the shortcode behaviour loads the template I want based on certain criteria.
First extend the class so that it accepts a template attribute
In the parse attributes function add
'template' => '',
Then search for wc_get_template_part('content', 'product'); and modify the code here to load different templates in an if..else statement. Something like:
`if($this->attributes['template'] == 'Daoine Óga') {
wc_get_template_part( 'content', 'childrenproduct' );
} else {
wc_get_template_part( 'content', 'product' );
}`
If there are simpler / better solutions please let me know.
I'd like to add a DIV under the title of my Shop page, but ONLY my main shop page.
I added some code in " archive-product.php " but then it display the code on every shop page.
In fact i just need a DIV saying " choose a category below " on the main Shop Page.
Thnaks a lot for your help!
Vince
Instead of overriding archive-product.php template, You can use the following custom hooked function, that will add a custom <div> below the title in shop page only:
add_action( 'woocommerce_archive_description', 'additional_div_in_shop', 5 );
function additional_div_in_shop() {
// Only on "shop" archives pages
if( ! is_shop() ) return;
// Output the div
?>
<div class="shop-below-title"><?php _e( "Choose a category below", "woocommerce" ); ?></div>
<?php
}
Code goes in function.php file of your active child theme (or active theme).
Tested and works.
Related Docs: woocommerce conditional tags
You can add that div conditionally like the following and then the div will be shown only on shop page
if ( is_shop() ) {
echo '<div>Choose a category below</div>';
}
I know this is an old post but, there is a page selected as the shop page for woocommerce. U can simply switch back to classic editor and add a div in the text section of the page u selected in the woocommerce settings. That way u don't need child theme or anything.
I have made a simple shortcode for my wordpress theme. I'm trying to align it on right-side above the corner of my page. Is it possible to insert shortcode function.php?
I want to place my Short-code in the top-bar (right side above the corner) so that it will work for each pages. Means if i click on any menu then the shortcode should have to work on that menu also.
Actually i'm new in web development. Please suggest me what shall i have to do so it will align where i want and should have work for each module.
You can use wordpress function for that. Please open the file on which you have to place shortcode. Like if you want to place it on header open header.php and add
<?php echo do_shortcode('[your_shortcode]'); ?>
where you want your shortcode content to appear
The best way is to find the top bar menu hook of your theme and then add this code (adapted for your needs) in your function.php child theme :
function my_shotcode_inside_top_bar ( $items, $args ) {
if (is_page() && $args->theme_location == 'secondary') {
$items .= '<li class="my-class">' . do_shortcode( "[my_shortcode]" ) . '</li>';
}
return $items;
}
add_filter( 'wp_nav_menu_items', 'my_shotcode_inside_top_bar', 10, 2 );
is_page displays the shortcode in pages only but you can choose another condition or no condition at all.
secondary is the hook and it depends on your theme. You can normally find it in your theme header.php file.
A menu location selector should be added - that way some themes support multiple menus, and some are called "top" or custom added.
The shortcode could then contain a call to whatever a menu position is:
EG: [myshortcode menu="secondary"]
Didn't have enough points to add this as a comment.
First,I know wordpress won't allow you to use template for posts (WooCommerce's product page is built via post). So I look for the Template Hierarchy.
It says there:
single-{post-type}-{slug}.php (Since 4.4). First, WordPress looks for a template for the specific post.
For example, if post type is product and the post slug is dmc-12, WordPress would look for single-product-dmc-12.php.
single-{post-type}.php – If the post type is product, WordPress would look for single-product.php.
single.php – WordPress then falls back to single.php.
singular.php – Then it falls back to singular.php.
index.php – Finally, as mentioned above, WordPress ultimately falls back to index.php.
So I created a template and name it single-product-ccc (ccc is one of my product's slug name), but nothing happened, nothing was affected.
But by creating a template named single-product will affect all of the product pages.
Why is that happening?
I don't get it. Even a single-2313.php (2313 is one post's id) will overwrite the default single.php for that 2313 post.
Why single-product-slug is not working in the same way?
Thanks.
Let me first correct you at one point. You say: "WooCommerce's product page is built via post".
This is not correct. WooCommerce creates a new post type 'product'. You can see all custom posts types that WooCommerce creates here: https://docs.woocommerce.com/document/installed-taxonomies-post-types/
The 'product' post type uses the template single-product.php.
As you say, WordPress Template Hierarchy Docs say that you can create a template for a particular product:
single-{post-type}-{slug}.php (Since 4.4). First, WordPress looks for a template for the specific post. For example, if post type is product and the post slug is dmc-12, WordPress would look for single-product-dmc-12.php.
WooCommerce is a WordPress plugin and as so, it doesn't always follow WordPress rules strictly, and this is one of those cases. But you can use a filter to correct this very easily. In your theme's functions.php simply add:
add_filter( 'template_include', 'custom_single_product_template_include', 50, 1 );
function custom_single_product_template_include( $template ) {
if ( is_singular('product') && (get_the_ID()==30)) {
$template = get_stylesheet_directory() . '/woocommerce/single-product-30.php';
}
return $template;
}
where get_the_ID() is the id of your Product. Now, you can create a new template as for example single-product-30.php
Try adding this in functions.php
function your_theme_add_woocommerce_support() {
add_theme_support( 'woocommerce' );
}
add_action( 'after_setup_theme', 'your_theme_add_woocommerce_support' );
and now onwards, you can use woocommerce/single-product.php for customisation
I've tried this hack from a previous thread:
Replace woocommerce_content() in woocommerce.php with:
if ( is_singular( 'product' ) ) {
woocommerce_content();
} else {
//For ANY product archive.
//Product taxonomy, product search or /shop landing
woocommerce_get_template( 'archive-product.php' );
}
This now loads the archive-product.php from the /plugin folder which is a step forward, but it should really load the archive-product.php from the /myTheme folder. I don't want to mess around in the plugin folder for obvious reasons...
Has anyone found a workaround for this?
Your archive-product.php file should be in your theme folder, within a /woocommerce directory. So: /wp-content/themes/your-theme/woocommerce/archive-product.php. It's a bit confusing, because the actual WooCommerce templates are within an additional /templates directory, in the plugin itself.
Read more about overriding WooCommerce templates in their documentation: http://docs.woothemes.com/document/template-structure/