I am trying to edit the layout of the shop page of my WooCommerce WordPress webshop.
Now in the WooCommerce settings I set it to disaply the categories. Now my goals is to change the <img /> tags into <div>'s. So I need to change the HTML. But I can't seem to find the template file that is used to create that page. I've looked in my theme folder and in the WooCommerce plugin folder.
Does anyone know where I can find the file or how to change the html output?
Many thanks in advance!
Check in this folder: wp-content/themes/your-theme-name/woocommerce/archive-product.php
If your theme is missing the woocommerce folder, then you can create on and past all (or only those you need to edit) template files and folders from wp-content/plugins/woocommerce/templates to the wp-content/themes/your-theme-name/woocommerce/
Also it is a good practice to use child theme when you need to edit the theme of your site so you won't loose your edits when updating it.
Hope this would help.
Considering this..
I wanna use a div with a fixed width and heigh and set a bg image so
I can set it to cover because the images are all different dimensions
Try this, maybe will work. This will wrap the image with a div. Copy and paste it on functions.php of your theme.
// Add the img wrap
add_action( 'woocommerce_before_shop_loop_item_title', create_function('', 'echo "<div class=\"img-wrap\">";'), 5, 2);
add_action( 'woocommerce_before_shop_loop_item_title',create_function('', 'echo "</div>";'), 12, 2);
Related
I want to replace src="image_url" to style="background: url('image_url')" of product image in shop page.
How should i do this?
Depending on what you are more comfortable, you have 2 possible ways:
in your theme create a folder structure of woocommerce\single-product\, copy inside it the file you can find at \wp-content\plugins\woocommerce\templates\single-product\product-image.php and edit the HTML;
in your theme functions.php add a filter on the woocommerce_single_product_image_thumbnail_html hook and replace the HTML passed by (maybe using some regex)
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
I am looking for a way (a function or a filter) to add an image to my custom theme on Wordpress. I have tried searching for ways on Google and here on SO but failed to find an answer.
All I get is "How to add an Image/Logo on my Custom Theme" but it just shows how to add a custom logo to be used on the header, footer, login page, etc. What I am trying to look for is a way to add an image to the theme itself like in Twenty Nineteen theme below.
I checked the code for the Twenty Nineteen theme to see how it was done but I can't seem to find the part where they added the code to theme image function/filter/css comment.
I am not new to creating custom themes in Wordpress. I am already familiar with using filters and creating functions to customize the theme. I know I can use the custom logo theme support in Wordpress for the image, but I just have no idea how I can use it (if it is a function or a filter). I just need help with this one. Thanks in advance! :)
Just name the image as screenshot.png [ recommended image size (currently) is 1200px wide by 900px ] and put it on theme's top-level directory (where the style.css file is )
Refarence: https://codex.wordpress.org/Theme_Development#Screenshot
I am currently working on a e-commerce site using wordpress and woocommerce and the theme The Retailer.
The theme does not have breadcrumbs links and now I have decided that I want to add them. From my understanding Woocommerce should have support for this.
I will enable the breadcrumbs links on the single-product.php page. The woocommerce documentation says that I should use <?php woo_breadcrumbs(); ?> function to enable the breadcrumb links.
But when I add the <?php woo_breadcrumbs(); ?> statement to my single-product.php page I get a fatal error saying that the function is undefined. My questions is how to make my child-theme "recognise" this function?
If I use "brute force" method and copy all the original woocommerce breadcrumbs code (found in: woocommerce/templates/global/breadcrumbs.php) to my own function inside my themes functions.php the breadcrumbs are working, although I do not get the delimiters and other things that should come with them...
This is not an elegant solution. Instead there must be some way for me to "register" the woocommerce breadcrumbs function inside my theme so that I can use the standard recommended woocommerce prodcedure. How would I do this?
Thank you for your help! Kind regards, Lukas
Here is solution that would work I guess:
Copy the "shop" folder to your theme from the below destination
wp-content\plugins\woocommerce\templates
And paste it inside your theme. I hope that will do the trick.
If your theme is woo-commerce ready, there is a file "theme-woocommerce.php" in includes folder; Thats were you can do the modification; You may want to create a child theme as well, in case you want to update your theme in a future
I just setup WooCommerce on my wordpress site:
http://artendijen.com/product/test-product/
I am not a fan of the template where it has the description and additional information below and in tabs, I would like the have the description and additional information to the right of the product image. Is there a setting I missed or will I have to edit it via CSS myself?
There is no setting for layout in WooCommerce. If you can do what you need to do with CSS then thats great. Otherwise, you will need to use hooks and actions in your functions.php to move things around. You can also overwrite woocommerce template files by copying them to your template with the same structure and file names you find in the WooCommerce plugin.
http://docs.woothemes.com/document/introduction-to-hooks-actions-and-filters/