I have a child theme from Storefront and have custom page templates running for the homepage and other pages without issues.
I am building a custom layout for Woocommerce pages and use content-single-product.php for the single product page with custom code in the file for example:
<div class="wc-product-images">
<?php do_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images'); ?>
</div>
<div class="wc-product-description">
<?php the_content(); ?>
</div>
Question 1: Do I call the Woocommerce Content correct with do_action() in the template file? I have a specific layout and cannot follow the hook layouts as per the default file
Question 2: When I call:
<?php
do_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products' );
?>
I get the product description with the related products and actually need to build a div with only related products.
How can I call this properly without the description included?
Any help is appreciated.
You are making confusions, original do_action( 'woocommerce_before_single_product_summary' ) enables an entry point in woocommerce content-single-product.php template, where add_action() is used to hook other templates using the functions:
woocommerce_show_product_sale_flash() (with a hook priority of 10)
woocommerce_show_product_images() (with a hook priority 20)
So if you want to enable only the product image in your custom template you will have to create your own hook:
<div class="wc-product-images">
<?php do_action( 'woocommerce_before_single_product_summary_custom' ); ?>
</div>
<div class="wc-product-description">
<?php the_content(); ?>
</div>
Then you will add this in function.php file of your active child theme (or active theme):
add_action( 'woocommerce_before_single_product_summary_custom', 'woocommerce_show_product_images', 20 );
It should work as intended.
But you can use in your custom template the original hook, if you don't need any different hook customizations… In that case you will only have that:
<div class="wc-product-images">
<?php do_action( 'woocommerce_before_single_product_summary' ); ?>
</div>
<div class="wc-product-description">
<?php the_content(); ?>
</div>
Additon: Related to your comment (regarding related products).
To enable related products in your custom template, add this block in it (with a custom hook):
<div class="wc-product-related">
<?php do_action( 'custom_after_single_product_summary' ); ?>
</div>
Then you will add this in function.php file of your active child theme (or active theme):
add_action( 'custom_after_single_product_summary', 'woocommerce_output_related_products', 20 );
It should work.
Related
I want to edit the html of the product results posts in my woocommerce storefront child theme.
Under search.php it says:
get_template_part( 'loop' );
Then under loop.php it says:
get_template_part( 'content', get_post_format() );
Which then takes me to content.php which contains:
do_action( 'storefront_loop_post' );
So do I need to edit the functions inside that action? If so how?
Quite new to using child themes.
Inside content.php, I commented out the storefront_loop_post hook and created my own action which I then referenced.
Works a treat
I am wondering if there is a way of doing something similar to <?php get_template_part(); ?> in the functions.php file – I am specifically hoping to target Woocommerce with this code.
Most of my website's pages use the following code from my default template – page.php
<?php get_header(); ?>
<?php get_template_part('includes/side-menu'); ?>
<div class="content">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
<?php get_footer(); ?>
I have set up my theme (custom built) for use with the Woocommerce plugin, but I'm having an issue with a side-menu in my theme that is in a separate folder from my header and footer. Woocommerce uses its own templates to generate its pages, i.e. the product archive and product pages etc. Each of these templates call my theme's header and footer by default, but they don't call my menu, so when I press the button to open it on one of those pages, it isn't there.
I have set up Woocommerce to be compatible with my theme using the method recommended by the plugin authors. I have added the following code to my functions.php
remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);
add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10);
add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10);
function my_theme_wrapper_start() {
echo '<div id="woocommerce-content" class="content"> <div class="container">';
}
function my_theme_wrapper_end() {
echo '</div> </div>';
}
This code allows me to add a div to the Woocommerce templates to wrap my content. I am wondering if there is a way of changing this code so I can call in my menu template side-menu.php on Woocommerce template pages.
There is another way of doing this, but I am trying to avoid using it because it involves a lot more work in the long term. It is possible to override the plugin template files by copying them into a folder within my theme, and adding the <?php get_template_part(); ?> code to call my side-menu.
The only problem with this is that it means that with every significant update to the plugin, I have to update these override files to include new code released with Woocommerce updates, because it doesn't update them automatically.
If there is any way of calling the side-menu as a blanket action throughout Woocommerce pages in the same way that the code above adds the HTML, that would be a much easier solution.
I'm interested to hear if this is possible.
I need a function to add a HTML code before checkout header title on WooCommerce. I would like to add a process bar.
Thanks
The Checkout title is located in the header.php of your theme. So there is no any WooCommerce hooks for that.
So you can accomplish that editing the header.php file of your active child theme (or active theme) using the dedicated WooCommerce conditional tag is_checkout():
<?php if( is_checkout() ): ?>
<!-- HERE GOES YOUR HTML CODE DISPLAYED ONLY IN CHECKOUT HEADER -->
<?php endif; ?>
ADDITIONAL UPDATE:
For checkout only and not order recieved (thank you):
<?php if( is_checkout() && ! WC()->cart->is_empty() ): ?>
<!-- HERE GOES YOUR HTML CODE DISPLAYED ONLY IN CHECKOUT HEADER -->
<?php endif; ?>
I want to change the product category menu style on the Woocommerce widgets but I can't find where to make the change. So far I've only found this. Where are the appropriate HTML tags?
<aside class="span4">
<div class="aside-wrap">
<?php dynamic_sidebar('Woocommerce Sidebar'); ?>
</div>
</aside>
Check your functions.php or simillar files, there will widgets_init hook using register_sidebar to register Woocommerce Sidebar.
I'm trying to make my woocommerce cart template display as a full 12 column layout.
The existing layout is using bootstrap's col-sm-8 column. I need to change it to col-sm-12.
<main class="main col-sm-8" role="main">
<div class="page-header">
<h1>Cart</h1>
</div>
<div class="woocommerce">...</div>
<div class="woocommerce-info">...</div>
<div class="cart-collaterals">
// shipping code etc.
</div>
</main>
I checked out the relevant woo-templates shown here, and copied the cart.php template into my theme to override. However, it looks like I need to modify the woocommerce_before_cart action to change the <main> layout and insert the col-sm-12 class. I found the relevant actions on this woocommerce page.
I can see from the cart.php template the action called before the <form> element as shown below:
global $woocommerce;
wc_print_notices();
do_action( 'woocommerce_before_cart' ); ?>
<form action="<?php echo esc_url( WC()->cart->get_cart_url() ); ?>" method="post">
<?php do_action( 'woocommerce_before_cart_table' ); ?>
<table class="shop_table cart" cellspacing="0">enter code here
I'm new to php, my question is how do I modify the output of this action so I can change the layout to 12 columns?
Woocommerce inserts the content in cart.php into page.php in the root of your theme. :)
Doesn't look like woocommerce creates action hooks for 'woocommerce_before_cart' or 'woocommerce_before_cart_table', you can check this with has_action(). They seem to be there as suggestions for developers to extend upon. Should be right to remove them from cart.php (although developers might have them there for future releases or popular plugins) or if you want to use them add this to your themes functions.php.
add_action('woocommerce_before_cart', 'sample', 1);
function sample() {
echo '<h1>hello</h1>';
}
EDIT:
Just read your response to the previous answer, looks like that theme you're using might be creating the hook in its functions.php file, look for
add_action('woo_commerce_before_cart', 'sample', X);
'sample' is the name of the function that is called and X is its priority. You can either modify the output of that function or add another function to the hook.
For anyone who works with child theme, please note that sometimes your parent theme already override the cart.php template, especially heavily customised like Themeforest products. So don't copy the original cart.php from Woocommerce, copy it from the parent theme template.