Custom Theme Single Product Page Wordpress/Woocommerce - wordpress

I am building my custom theme and my single.php displays woocommerce single product page with
if ( have_posts() ) {
while( have_posts() ) {
the_post();
the_content();
}
}
Why is the page missing - title, reviews & breadcrumbs?

Woocommerce has its own templates for their pages. A single product should be showing on single-product.php. You would create a woocommerce folder inside your custom theme and copy the directories and files you want to edit over to your theme.
How to override single-product.php
If you want to custimize the single-product.php, you would create a woocommerce folder in your theme and copy the single-product.php over into it. So the directory would be yourtheme/woocommerce/templates/single-product.php. This way you have all the actions hooking in the functionality you are missing.
Here are the docs:
https://woocommerce.com/document/template-structure/

function mytheme_add_woocommerce_support() {
add_theme_support( 'woocommerce' );
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );
}
add_action( 'after_setup_theme', 'mytheme_add_woocommerce_support' );
Please add this one in the functions.php file

I was missing
add_theme_support('woocommerce');
in my functions.php file

Related

Generate PDF file on product page woocommerce

I using wordpress and woocommerce plugin and added custom html button on product page. I did it in function.php file. How can i get PDF file with photo content from every product page after click on my button?
add_action( 'woocommerce_after_single_product_summary', 'custom_button_on_product_page' );
function custom_button_on_product_page() {
global $product;
echo '<button class="send_button">SEND PDF</button>';
}
function enqueue_jspdf() {
wp_enqueue_script( 'jspdf', 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js', array(), '2.5.1', true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_jspdf' );
How can i do it? Help please. I tried add jsPDF library in function.php too and paste javascript code in code snippet. But i don't now how to hook on my code to photo content in product page. Great thanks for your answers

How to get product data in header.php file wordpress woocommerce

I want to show something of product like: name, price, sku in the header.php file.
Below is my code to get product in header.php
global $product;
var_dump($product);
But var_dump just show me the product name like string(6) "hoodie", not array of product.
So, how can I get the product data in header.php file.
Thank you.
Use the Wordpress get_the_ID() function.
Wordpress - get_the_ID()
Obviously this will only work if you are on the product page, so you can add an extra control with WooCommerce's is_product() function.
WooCommerce - is_product()
Finally, to add custom code in the header you can use the wp_head hook.
Wordpress - wp_head
So the function will look like:
// gets the product data in the header
add_action( 'wp_head', 'get_product_data' );
function get_product_data() {
// only on the product page
if ( ! is_product() ) {
return;
}
// gets the product object
$product = wc_get_product( get_the_ID() );
?>
HTML CODE HERE
<?php
}
Tested and it works. The code goes into your active theme's functions.php file.

Custom post template in a plugin erase theme's one

i work with sportpress on Wordpress. I have a custom plugin that add a lot of function to it.
I created a template for the custom post-type of sportpress. They are in my plugin but i don't find how to make them prioritary on theme. The theme isn't a custom'one, so i don't want to delete or modify anything in it.
I have tried several things but theme's file is everytime superior.
Things tried :
naming the file 'single-....php',
filter : add_filter( 'template_include', 'toornament_template' ),
shortcode in theme file (works but not what i want...),
Thanks a lot...
EDIT :
here is what i tried exaclty, it works with another type of post that has no theme template, but not for the one that has single-post template in the theme...
add_filter( 'template_include', 'player_template', 1 );
function player_template( $template ) {
if ( is_singular( 'sp_player' ) && file_exists( plugin_dir_path(__FILE__) . 'templates/player-tpl.php' ) ){
$template = plugin_dir_path(__FILE__) . 'templates/player-tpl.php';
}
return $template;
};

cart and checkout doesn't work in woocommerce

I include woocommerce/template in my theme with this name : 'woocommerce' and also use add_theme_support() in my functions.php to introduce it .
but when user add a product to cart and wants to see the cart , user redirect to index.php
what should I do to fix this ?
#Ali Please share your code so I can have better idea.
OR
Add Theme Support Code to functions.php file
function mytheme_add_woocommerce_support() {
add_theme_support( 'woocommerce' );
}
add_action( 'after_setup_theme', 'mytheme_add_woocommerce_support' );
Created folder "woocommerce" into your theme folder.
Copy all files from "wp-content/plugins/woocommerce/templates/" to this folder.
Add below code to functions.php file.
function my_custom_add_to_cart_redirect( $url ) {
$url = get_permalink( get_option( 'woocommerce_checkout_page_id' ) );
return $url;
}
add_filter( 'woocommerce_add_to_cart_redirect', 'my_custom_add_to_cart_redirect' );
Try this.
finally I fix it. it was so stupid.
I just forgot to add page.php in my theme
<?php get_header(); if (have_posts()) {while (have_posts({the_content();}}get_footer();
because cart shortcut need to display in a page .

Activate Woocommerce image gallery features on shop archive page

I'm trying to build a Woocommerce shop with all products listed with full product information (excerpts, pictures, title, price, etc.) on the shop archive page. No product detail pages.
I have loaded the simple-page content instead of page-content in the loop of my custom archive-product.php in my theme/woocommerce folder.
My problem is, that the product image gallery features (zoom, lightbox, slider) don't work on the archive page, only on single-product-page.
How can I unlock the gallery features for the shop and category archive pages?
I think, that wordpress or woocommerce somehow deactivated certain javascript or php functions for the gallery features on this page. But I couldn't figure out where to make changes in order to bring them back in.
Here is the code I use for the loop in my moded archive-product.php. I simply changed 'product' to 'single-product' in order to load the full product content:
<?php while ( have_posts() ) : the_post(); ?>
<?php
/**
* woocommerce_shop_loop hook.
*
* #hooked WC_Structured_Data::generate_product_data() - 10
*/
do_action( 'woocommerce_shop_loop' );
?>
<!-- This part of the template has been moded for the product archive page to show the complete content of the single product page -->
<?php wc_get_template_part( 'content', 'single-product' ); ?>
<?php endwhile; // end of the loop. ?>
In case anyone ever has the same problem as me and wants to activate the woocommerce image gallery features on the archive page same as on the product page, add this code to the functions.php in your theme folder:
add_action( 'wp_enqueue_scripts', 'gallery_scripts', 20 );
function gallery_scripts() {
if ( is_archive()) {
if ( current_theme_supports( 'wc-product-gallery-zoom' ) ) {
wp_enqueue_script( 'zoom' );
}
if ( current_theme_supports( 'wc-product-gallery-slider' ) ) {
wp_enqueue_script( 'flexslider' );
}
if ( current_theme_supports( 'wc-product-gallery-lightbox' ) ) {
wp_enqueue_script( 'photoswipe-ui-default' );
wp_enqueue_style( 'photoswipe-default-skin' );
add_action( 'wp_footer', 'woocommerce_photoswipe' );
}
wp_enqueue_script( 'wc-single-product' );
}
}

Resources