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.
Related
Somewhere in the html of my Woocommerce shop page I have this line:
<ul class="products columns-3">`
I'd simply like to add the bootstrap class "row" to it like:
<ul class="products columns-3 row">
I inserted the bootstrap cdn in my chrome elements tool then added the "row" and I have the result I want it but I can't find in my website files where to change it.
I know the html code is generated by functions.php, I tried to look down in almost every php page on templates and woocommerce. Can someone explain me how this can be done?
To add a custom class to <ul> html tag on WooCommerce shop and archives pages:
First read "Overriding templates via a theme" official documentation, that explains you how to override woocommerce templates via a theme.
Note for "Premium Themes":
On some premium themes, they can use already some customized WooCommerce templates, so you will have to use them instead. If you are using a child theme with it, copy the related template to your child theme, respecting the same folder hierarchy.
Once understood this, the related template to edit is loop/loop-start.php.
Open/edit it and replace:
<ul class="products columns-<?php echo esc_attr( wc_get_loop_prop( 'columns' ) ); ?>">
with:
<ul class="products columns-<?php echo esc_attr( wc_get_loop_prop( 'columns' ) ); ?> row">
Save… You are done.
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.
I have created a custom theme for woocommerce an copied templates folder to my theme rootwoocommerce. now I figured that all pages in woocommerce has a div container with class woocommerce. I want to change the class of it or remove that from my theme. I searched in my theme files <div class="woocommerce"> and I found nothing. !
is there any way to change or delete that?
No, you can't change or delete, which could break everything, read more here - https://github.com/woocommerce/woocommerce/issues/12191.
You can't find because the word <div class="woocommerce"> may be a parameter of a rendering function (example: <div class="<?php echo $param">) and you must find where php code is placed instead. When you get where it is placed, just add your class after parameter (example: class="<?php echo $param?> your-class") to access this element
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 want to add on templates/content-single-product.php:
• An opening <div> before line 39
• A close </div> after line 81.
Copying this template to my active theme and make the customization just works fine.
However is there a better way to do this without copying the template?
I thought I had seen some way to apply a filter to do_action( 'woocommerce_before_single_product_summary' ); and do_action( 'woocommerce_after_single_product_summary' ); to do something similar.
I just wanted to check the way I am doing, is the correct way.
Is the way I have chose, the right way?
Thanks.
In template content-single-product.php, The only way to have your open <div>, is the template herself, as you want it before (line 39):
<div itemscope itemtype="<?php echo woocommerce_get_product_schema(); ?>" id="product-<?php the_ID(); ?>" <?php post_class(); ?>>
Because if you use woocommerce_before_single_product_summary your open <div> is going to be after that existing <div itemscope itemtype="…"> and not before.
For the closing , as you are editing your template, the best way is to add it in your template (just as you made it.
But it should work too in woocommerce_after_single_product hook with any kind of priority (as nothing is already hooked in); this way for example:
function single_product_closing_div(){
echo '</div>';
}
add_action( 'woocommerce_after_single_product', 'single_product_closing_div', 10, 0 );
Conclusion: You have done it the right way, in the template directly.
You can probably do that by adding two hooks for woocommerce_before_single_product_summary and woocommerce_after_single_product_summary so they will look like this
add_action('woocommerce_before_single_product_summary','your_function_name',1);
add_action('woocommerce_after_single_product_summary','another_function_name',99);
function your_function_name(){echo ""; }
function another_function_name(){echo ""; }