I am creating a Wordpress custom theme, and I've been having issues with my woocommerce template rendering. Firstly, not all of the pages are showing up (some of them are reverting to the index.php and page.php files). Secondly, for the pages that are showing up (the single product page, the archive products page), the css is not being applied. I have tried everything suggested on the docs (hooks), but I have failed. Here is a link to my github for you to see the file structure.
https://github.com/naderae/elbe-collections
possible issues wuth my code:
my code is not written in the standard wordpress way. I only have three pages so far, index.php, page-about.php, and page-team.php, which work fine. page.php and single.php are empty. thus, my site consists of 2 pages, and index.php.
I've been struggling with this for 2 days, and would really appreciate some guidance of hoe to get me back on track. Cheers
Below is a list of some basic theme templates must preset in theme, more about this in details click here.
index.php
style.css
header.php
single.php
page.php
category.php
archive.php
404.php
I would recommend you to start with some default WordPress theme like twentyseventeen theme or other. These themes will have all basic functionality of WordPress. Check functions.php in the theme folder to customize/add functionality.
for more details about Template Hierarchy click here
Customize WooCommerce
Template structure & Overriding templates via a theme - link
Customizing WooCommerce - link
To overwrite woocommerce css you need to add a woocommerce folder to your theme. And go from there.
Woocommerce will also always use their own templates so the easiest way to change the layout is to use a child-plugin from woocommerce.
Related
I'm trying to have a pagination on my custom Products page that is not the default one in Woocommerce.
I used Elementor to customize this page and after some research I saw that I could call a function that is already integrated in WordPress using the < paginate_links > function.
The only problem is that I have no idea where to call this function in order to have a pagination on my product page.
To be more precise, i would like to know where exactly i have to change or add my php functions, and what code should i use to get my pagination.
Normally it is in the archive.php or a version of that file name specific to your post-type. But before you go and change it, create a child theme in case you haven't done that already. In the child theme folder, you then duplicate the archive.php or similar to make it overwrite the one from the parent theme. This way you keep your version of the theme clean and updatable without losing any changes.
(For creating a child-theme you will need to create at least a style.css [with a WordPress-specific comment, you can google] and a functions.php-file that needs a bit of php-code to enqueue the child-themes scripts and styles. The code for the functions.php can also be found by a quick google search. You then just place the style.css and the functions.php into a new folder you name in the pattern [foldername of your themes name]-child. You then place this folder next to the parent-themes folder in the "/wp-content/themes/"-directory.)
And here you go for the pagination: https://codex.wordpress.org/Pagination
I'm a pretty decent wordpress coder. Maybe I'm being stupid, but I can't work out how to edit the Divi blog module layout... basically the archive.php for the Divi theme - it doesn't seem to have one.
What I want to do is change the HTML of the blog when it added to the Divi page builder as a module... How do I go about editing the code for that?
(I've searched everywhere and they all talk about CSS changes, but I want to edit the HTML that is output as well).
Thanks!
EDIT: To clarify my question, I'm looking for specific help with DIVI. I have a good understanding of Wordpress, and know the usual hierarchy structure. My question for Divi is more to do with the blog module that you add to the Page Builder - that's the bit I want to edit the HTML output of.
All google searches (and stackoverflow!) point me to CSS changes only, but I want to edit the HTML output of that page builder (Which I'm guessing is using a shortcode)
Make a copy of the index.php file from the Divi parent theme
Paste the file into your child theme directory
Change the name of the file to archive.php
Modify the html/php as you need
That should work :)
There is usually a page (under pages in Wordpress) that has an "Archive" template. Check it out and edit that template.
You can check more about page templates (and maybe even creating your own, if you wish) here - https://www.elegantthemes.com/blog/resources/an-introduction-to-wordpress-page-templates
You can use Divi Builder for categories pages or custom categories pages.
You simply have to go in Divi > Theme Builder. Then, go into a new model, and select the archive page you need. Finally, you can add custom content within the builder into the header, body or footer. That content will be available in the archive pages you selected.
I have build my own Wordpress theme and activated Woocommerce. Almost everypage works fine. But my Store and Product pages are not in Container. Also I would like to chanche the positions of sertain items on the Product Page. Theme is build in Bootstrap so I would like to use Bootstrapp to fix my Product page. The biggest problem is that I cannot find the right file to edit... Somebody got the solution?
You can check the site here.
Thanks!!
To build a WooCommerce Compatible theme, you need to edit the WooCommerce templates.
All the WooCommerce templates are located at woocommerce/templates folder. If you are not familiar with WooCommerce templates structure, you can install WooCommerce Template Hints, and it will display the template file name to show you where the content comes from.
To customize the template, please follow the best practices so your modifications will not be missing when you update WooCommerce.
Hi i'm creating a webshop with WooCommerce but with a self made theme, now showing the content-single-template works fine, however the cart/checkout page is not working. This is what i've done so far:
• Add woocommerce.php in the root of my theme with woocommerce_content() inside.
• Created "woocommerce" directory in the root of my theme inside this directory another one "checkout" and inside there my custom form-checkout.php
• Shortcodes on every page are included
• Clean install WooCommerce
• Flushed permalinks
I've read trough this article from WooCommerce on how to integrate it and followed every step precisely.
When i switch to a differend theme it does show the cart/checkout page so wondering what i'm overseeing here.
Thanks
EDIT:
Contents: woocommerce.php
<?php
get_header();
woocommerce_content();
get_footer();
Got it fixed, because i basically created my own theme i started switching theme's and see the difference between mine and the working theme.
What fixed it for me was in content.php placing this:
<?php the_content(); ?>
The Proper way to work with WooCommerce Templates is, Copy the templates folder from your /wp-content/plugins/woocommerce/templates/ and paste it in your theme like /wp-content/themes/your-theme/ and rename it to /woocommerce/ So It would be like this
/wp-content/themes/your-theme/woocommerce/ and then you can edit the templates and change the UI.
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/