I am trying to use Woocommerce's wc_get_template function to load my own templates, but it dosen't seem to work (it's not outputting content from the template files), together with my Woocommerce plugin. Below is what I have tried:
plugindir/templates/testing-template.php:
<h1>Output stuff</h1>
plugindir/pluginname.php:
if(in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option('active_plugins')))) {
function template_loader(){
wc_get_template('testing-template.php', array());
}
add_action('init', 'template_loader');
}
wc_get_template will first try to load the template from the the theme in the woocommerce folder. If it does not find the template in the theme's woocommerce folder it will try and load the template from woocommerce templates folder.
wc_get_tempalte will not just work with any template you want. If you are building a plugin of your own you can try and look at the WC_Template Class and try to mitigate the functionality of wc_template in your own plugin with plugin_prefix_template() and also have a templates folder in your plugin.
https://docs.woocommerce.com/wc-apidocs/source-class-WC_Template_Loader.html#13-510
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 have a developed an e-commerce website with WordPress and WooCommerce plugin. Everything has been done but I want to change the complete layout of the checkout page. I tried finding a plugin to do that but failed.
Is there any way by which I can change the layout or the design of the checkout page?
EDITED:
THE WOOCOMMERCE TEMPLATES:
You can copy the "templates" folder (located inside the woocoommerce plugin folder) to your theme (or child theme) folder and rename it "woocommerce".
Then you can chose inside which file you want to edit to feet your needs.
In your case you will find inside a folder named "checkout". All the files inside this "checkout" folder are the different components of the checkout page layout.
Different files responsible for components on checkout page/form
form-checkout.php is the primary file called for checkout page.
form-login.php renders the login form.
form-coupon.php renders the coupon form.
form-billing.php renders the billing form.
form-shipping.php renders the shipping form. (this is displayed when "ship to different address checkbox is checked)
review-order.php renders the order review block.
payment.php renders payment options block.
payment.php has a loop in which for each enabled payment method another file > payment-method.php is called.
cart-errors.php displays cart error.
thankyou.php is called for displaying order received confirmation. ("order-received" endpoint)
ADDING WOOCOMMERCE STYLE SHEET IN CHILD THEME FOR EASY MODIFICATION
Because some times is very difficult to overrides some specific WooCommerce styles.
Step.1 - Disable the general woocommerce.css file.
Add this PHP code to your active theme's functions file (functions.php):
add_filter( 'woocommerce_enqueue_styles', 'wooc_dequeue_styles' );
function wooc_dequeue_styles( $enqueue_styles ) {
unset( $enqueue_styles['woocommerce-general'] );
return $enqueue_styles;
}
Step.2 - Create a new folder inside your active theme's folder named "woocommerce" (if it doesn't exist yet).
Step.3 - Copy the woocommerce.css file into this newly created folder woocommerce in your active theme's folder.
The woocommerce.css file is located in: plugins/woocommerce/assets/css/woocommerce.css.
Step.4 - Enable (enqueue) the general woocommerce.css file in your active theme.
Add this PHP code to your active theme's functions file:
add_action('wp_enqueue_scripts', 'woocommerce_style_sheet');
function woocommerce_style_sheet() {
wp_enqueue_style( 'woocommerce', get_stylesheet_directory_uri() . '/woocommerce/woocommerce.css' );
}
Options:
— You can also enable/disable others woocommerce css files: see this snippet at woo themes
— You can disable ALL Woocommerce style sheets at once:
add_filter( 'woocommerce_enqueue_styles', '__return_false' );
I can't work on any specific theme file like header.php, footer.php OR function.php within theme directory.
Reason is project always need new theme and theme is get changes in each week.
So I want something like that will work on each theme, no matter which theme admin applied.
I tried wp_enqueue_script() but again I need work on theme's function.php file.
The only way to do this is to run wp_enqueue_script() from outside of the theme (i.e. NOT in functions.php). The only way you can do that is to use a plugin.
See: http://codex.wordpress.org/Must_Use_Plugins
Or: http://codex.wordpress.org/Writing_a_Plugin
Create a plugin by adding a .php file in the /wp-content/plugins/ directory, or possibly even better for this situation create a 'must use' plugin by creating a .php file in the /wp-content/mu-plugins/ directory.
The structure of this .php file should be something like the following:
<?php
/*
Plugin Name: Example Plugin
Description: Any functions that should persist even if the theme changes.
Author: Your Name
Version: 1.0
Author URI: http://yoururl.com
*/
function my_scripts() {
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
}
add_action('wp_enqueue_scripts', 'my_scripts' );
?>
You need to write a plugin that rewrites theme's sections. A good start for creating a plugin is here. If your themes shares the same Javascript you could try to add your things to those Js.
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/
I want to modify/overwrite functions written in woocommerce-functions.php file but I don't want to modify woocommerce-functions.php file. That is I want to achieve this in plug-in or in my theme.
It is possible to override woocommerce functions, I did this recently and added all of my woocommerce extended functionality to my theme's functions.php file so that the woocommerce plugin files remained untouched and are safe to update.
This page gives an example of how you can remove their action and replace it with your own -
http://wordpress.org/support/topic/overriding-woocommerce_process_registration-in-child-theme-functionsphp
This page gives an example of extending upon their functions without removing their function, as well as using child themes -
http://uploadwp.com/customizing-the-woocommerce-checkout-page/
Hope this helps :)
WooCommerce provides a templating system. It is possible to override woocommerce functions. great way to customize WooCommerce without modifying core files, is to use hooks -
If you use a hook to add or manipulate code, you can add your custom code to your theme functions.php file.
Using action hooks -
To execute your own code, you hook in by using the action hook do_action(‘action_name’);.
See below for a great example on where to place your code:
add_action('action_name', 'your_function_name');
function your_function_name()
{
// Your code
}
Using filter hooks-
Filter hooks are called throughout are code using apply_filter(‘filter_name’, $variable);
To manipulate the passed variable, you can do something like the following:
add_filter('filter_name', 'your_function_name');
function your_function_name( $variable )
{
// Your code
return $variable;
}
Here you can get WooCommerce Action and Filter Hook - https://docs.woothemes.com/wc-apidocs/hook-docs.html
If you have a child theme, you can copy the relevant file to your theme and rewrite the copy. The copy will be used in preference to the WooCommerce version.
I was needed to add "Play" button for videos on mobile devices (by default this button is shown just on desktop).
I was needed to override the function in wp-content/themes/gon/framework/theme_functions.php:
function ts_template_single_product_video_button(){
if( wp_is_mobile() ){
return;
}
global $product;
$video_url = get_post_meta($product->id, 'ts_prod_video_url', true);
if( !empty($video_url) ){
$ajax_url = admin_url('admin-ajax.php', is_ssl()?'https':'http').'?ajax=true&action=load_product_video&product_id='.$product->id;
echo '<a class="ts-product-video-button" href="'.esc_url($ajax_url).'"></a>';
}
}
I found this instruction which states If you use a hook to add or manipulate code, you can add your custom code to your theme’s functions.php file.
I already had wp-content/themes/gon-child/functions.php, (ie the original gon theme had been copied to gon-child), so what I did was:
// Enable tour video on mobile devices
remove_action('ts_before_product_image', 'ts_template_single_product_video_button', 1);
add_action('ts_before_product_image', 'ts_template_single_product_video_button_w_mobile', 1);
function ts_template_single_product_video_button_w_mobile(){
global $product;
$video_url = get_post_meta($product->id, 'ts_prod_video_url', true);
if( !empty($video_url) ){
$ajax_url = admin_url('admin-ajax.php', is_ssl()?'https':'http').'?ajax=true&action=load_product_video&product_id='.$product->id;
echo '<a class="ts-product-video-button" href="'.esc_url($ajax_url).'"></a>';
}
}
?>