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.
Related
I have a woocommerce site and for some reason the product search is displaying results using the wordpress search.php.
How can I override the default wordpress search template and use woocommerce archive-product.php template as normal. Using woocommerce product search widget.
I have woocommerce folder inside my theme and contains the archive-product.php, product-searchform.php
The shop page is using archive.php and I want the same template for search results.
Code in my header for the form
<div class="woo-search">
<?php if(is_active_sidebar('woo-search')){
dynamic_sidebar('woo-search');
} ?>
</div>
How can I make the search results to display using archive-product.php?
You've to use template_include filter. You have to add following code into your active theme's functions.php file.
The call back function checks the post type being searched. If it's the products it choose your desire template to list out search results.
function template_chooser($template) {
global $wp_query;
$post_type = get_query_var('post_type');
if( $wp_query->is_search && $post_type == 'products' )
{
return locate_template('archive-product.php'); // redirect to archive-product.php
}
return $template;
}
add_filter('template_include', 'template_chooser');
Let me know your feedback.
I would edit the pages of posts (eg: http://example.com/author/wordpress_post) with PHP and CSS. How can I do it? Is there already a default PHP file for posts that I can modify?
You may need to read up on WordPress' Template Hierarchy
Posts, by default, use the single.php file, located in the theme directory. Note if you have a Parent Theme and an active Child Theme, your child theme may not have a single.php file. You can, however, copy the single.php file from the parent to the child and modify it from there, knowing that if the parent theme structure changes, your child theme may need to accommodate.
If your theme uses a different structure, you can always modify the single post functionality with the is_single() function in your functions.php file. If you just want to edit post titles, you could put this code in functions.php
function my_title_filter( $title, $post_id = null ) {
if( is_single() ){
// Only modifies Post titles, no other titles.
$title = 'Add This Before Post Titles '. $title;
}
return $title;
}
add_filter( 'the_title', 'my_title_filter' );
For CSS, just, well, use CSS. Open up style.css or the customizer and go to "Additional CSS" and make the changes you want. On single posts, the body (should) have the class single-post so you can filter out CSS changes only for posts by prefixing your selectors with that.
/* Make paragraphs a light blue, but only on single posts */
.single-post p {
color: #0095EE;
}
I've created a custom archive page for a custom post type I've also created. I would like to style only this Custom Archive page. I've tried to create a function inside functions.php but it doesn't work.
My question is : how do I use a custom stylesheet for this archive page and not on the other ones ?
Thanks
function interviewlist_style() {
if ( is_page_template('archive-interview.php') )
wp_enqueue_style('Archive Interviews', get_stylesheet_directory_uri() . '/css/archive_interviews.css');
}
add_action( 'wp_enqueue_scripts', 'interviewlist_style', 1);
If I've understood the question correctly, you've created a template for your custom post type archive.
The conditional you're using would apply if you were viewing a page that had been assigned a custom template with the file name 'archive-interview.php'. As you're dealing with an archive, not a page, you need to use a different function.
Replace:
if ( is_page_template('archive-interview.php') )
With:
if ( is_post_type_archive( 'interview' ) )
This will evaluate to true if you're viewing the archive for a custom post type named 'interview'.
https://codex.wordpress.org/Function_Reference/is_post_type_archive
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
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 .