Add additional content to WooCommerce layout? - php

I'm trying to add additional content (such as a banner image, an additional loop) to the WooCommerce plugin, but I'm having trouble trying to output such said content.
I'm trying to make WooCommerce output <div>s with <img> tags in the wrapper-end.php template area after the <div>s, but nothing comes up.
I've also tried placing the extra content after <?php woocommerce_content(); ?> in woocommerce.php, but it duplicates itself for every single page afterwards.
I'm confused. Is it possible? Am I doing something wrong?
I'm trying to do something like this.
Can someone share their experience?

if you don't use the catch-all woocommerce_content() function, but the hooks instead, you can customize every page individually by just copying all the files from woocommerce/template to yourtheme/woocommerce. See woocommerce docs for more info.
The templates will also show you the other hooks & filters that you can use to place your content.

Related

PHP Woocommerce Flatsome theme - Remove breadcrumb from shop page title

1) I'm trying to remove the breacrumb from page-title div using php instead of display:none but i can't manage to found the good hook, i check in many different php files etc but anyway i'm not good enough in PHP. I'm like zero.
2) I also want to display the breadcrumb into the footer. I manage to found a way to add it into the footer already using simply
add_action( 'flatsome_footer', 'flatsome_breadcrumb', 10 );
But i did not found the hook to put it into their "footer-1" that is a child div of the footer block. This flatsome_footer is the parent div and it will make me add more css for it.
Here is the documentation of the flatsome theme (Actions & Filters), it may can help (i try many different as i say & open php files but cant manage to remove it by remove_action maybe i have to add filters idk... i'm just bad.
https://docs.uxthemes.com/article/385-hooks#flatsome_footer
All i know is that their page title block is using (shop-page-title category-page-title page-title) css class.
Thank you very much for helping.
If you want remove breadcrumb from shop or product page, you should findout hook from below files and comment that code.
Category Page File: yourthemepath/woocommerce/layouts/headers/category-title.php
Please check https://docs.uxthemes.com/article/385-hooks#flatsome_category_title
Product Page: https://docs.uxthemes.com/article/385-hooks#flatsome_product_title

How to edit the WooCommerce shop page

I have copied the WooCommerce files from my plugins file into my theme file so that I can edit / overwrite them. Now I want to be able to find the html files so I can remove certain sections like the search bar and page links in the sidebar. I also need to find the html as I would like to make this plugin work with bootstrap. Which files do I need to find to make these kinds of changes?
I've tried looking and all I can find is php code. Or is this not the way I should be trying to achieve this? Thanks
This is what I'm getting by default as you can see all of my page links are in the sidebar along with a search bar.

Add <?php the_content(); ?> to WooCommerce page template

I use Elementor page builder on my WordPress site. There is a problem with it - by default it doesn't allow editing WooCoomerce Shop/Products pages. The solution they say is to add to page templates code. I, being a beginner with no idea of coding, cannot figure out which file to add this code to and where in that file. I have been researching and trying to fix this myself for two weeks now, in vain. Please help me achieve this.
Here's what Elementor say: "Sorry, the content area was not found in your page. You must call the_content function in the current template, in order for Elementor to work on this page."
Go to Elementor setting and then check products in post types
Go to Products, click Edit on the product you want to edit, input something (ie. a full stop-sign '.') in the WP Editor, click Update. (See attached screenshot.)
Screenshot
There seems to be a misconception that Elementor can be used to "edit" any content.
For Elementor to work on a "Page" i.e. the post type that uses either the page.php or any theme declared page templates it requires the_content(); function to present in the code.
Issue #1: WooCommerce uses the woocommerce_content(); function to return the content of the shop.
Issue #2: The Shop output does not use the "Page" or Custom Page template - the output is equivalent to the index.php or home.php, neither of which are editable via Elementor.
Unless you are willing to write a pretty sophisticated function to collect all those elements' data and filter them into the_content(); function, there is currently no way of editing such content directly.
I know it's not the solution you are looking for but that is the current state of affairs. Having said that, some of us are working on all sorts of solutions and maybe, just maybe - we'll come up with a way to have this option available soon ;)
For shop page you should go to Elementor setting and then check products in post types.
Because shop page products are not the content but posts it's the solution.
So inlcude products in post types and edit with elmentor, if for some reason you can't see 'edit with elementor' under shop page, then just open shop page and add
/?elementor and it would enable elementor
NO need to add this code in any page follow these instruction.
You just need to clear cache and cookies your browser, Some time website take previous data to show the web page and give this error.
or
if you open your website private mode then login and go to the page by Elementor you will never face this problem.

How to output html on a custom location with a wordpress plugin?

How can I use a self-made Wordpress plugin to output for example a custom menu or custom HTML to a specific location? The only places I managed to output content is in wp_head and wp_footer, but is it possible to get content to show up anywhere else? Is it even possible to force the plugin to output the HTML for example inside a specific div or a DOM element?
Example scenarios
I want to add a custom button that triggers a menu or modal, but the button needs to be located inside the header and I also need a place for the modal HTML before the footer (example).
I want to add custom made "social share buttons" to every page and need a place to output the HTML after the page title.
Just to give you a feeling of what I'm trying to do...
Maybe I'm just way off track. I am new to this, but I am eager to learn.
"Teach me the ways of the force"
Appreciate any help, Thanks :)

Woo Commerce, remove columns completely in archive

I am new to using woocommerce and only been working with wordpress about six months so may be an easy answer.
I don't want any columns in my archive at all. I just want to display the products using a responsive grid system like this ...
http://www.responsivegridsystem.com/
or use masonry (preferred).
I have used masonry in a page template in wordpress to display an unordered list before without a problem but cannot figure out how to use it or the responsive grid with woocommerce shop.
How can I stop woocommerce using columns ?
Thanks
Overriding can be done in various ways, here's the cleanest approach:
The file is located at wp-content/plugins/woocommerce/templates/archive-product.php. You should put it in your theme folder - wp-content/themes/woocommerce/archive-product.php. Then make the changes you want. For instance, I'd start with removing the line do_action( 'woocommerce_sidebar' ). You might also want to override wrapper-start.php and wrapper-end.php found in the templates folder ( in either shop or global subfolder, depending on woocommerce version ), which can be overriden exactly the same way.
For reference, see their documentation: http://docs.woothemes.com/document/template-structure/
MSTAnnu put me on the right lines, I needed to be using content-product.php, and added a class to the tag in there. This overrides all column issues.
I changed the tag in the loop-start.php file in templates/global and used css to style into a responsive design using %. Not used to masonry layout yet but if I do will add solution here unless someone beats me to it.

Categories