Is it possible to display product variations on home page? I mean I dont want to go to product page to buy one. I just want to choose variation and click "buy now".
P.S. I use custom loop to display products on my home page.
<div <?php wc_product_class( 'product-item', $product ); ?>>
<figure class="product-thumbnail">
<a href="<?php echo $product->get_permalink() ?>">
<?php echo $product->get_image() ?>
</a>
<figcaption>
<span class="product-badge_sale">20%</span>
</figcaption>
</figure>
<div class="product-item_details">
<a href="<?php echo $product->get_permalink() ?>">
<span class="product-name"><?php echo $product->get_title() ?></span>
</a>
<div class="product-item_meta">
<div class="product-item_buy">
<?php if( $product->product_type == "simple" ): ?>
<a href="<?php echo $product->add_to_cart_url() ?>" value="<?php echo esc_attr( $product->get_id() ); ?>" class="ajax_add_to_cart add_to_cart_button" data-product_id="<?php echo get_the_ID(); ?>" data-product_sku="<?php echo esc_attr($sku) ?>" ><?php echo $product->add_to_cart_text() ?></a>
<?php endif; ?>
<?php if( $product->product_type == "variable" ): ?>
<?php woocommerce_variable_add_to_cart() ?>
<?php endif; ?>
</div>
<div class="product-price">
<?php echo $product->get_price_html() ?>
</div>
</div>
</div>
As you can see Im trying to check if the product type is "variable". When I use woocommerce_variable_add_to_cart() function it works only on archive page. But not in home page.
Some screentshot what I mean
Related
I have displayed wc product's variations as a single product.
Here is link: https://hueslabsstage.wpengine.com/store/
also, you need credentials:
login: hueslabsstage
password: 11test11
I have an issue with ajax load more function. I am using WooCommerce Load More Products by BeRocket. For example, when I choose 2 products to show on load more it really shows 2 products, but with all variations. For example, I have 4 products, the first one and the second one with 2 variations, so the plugin shows me 4 items on the shop page(2 products with 2 variations).
So, I need to display each variation as a single product in the way the plugin sees products. In order to when I choose 2 products to show, the plugin should display 2 variations of the product, instead of 2 products with them all variations.
Hope I explained my issue correctly.
My content-product.php:
<?php
if ($product->is_type('variable')): ?>
<?php
$unique_variations = [];
foreach($product->get_available_variations() as $key => $item) {
if (!variation_exists($item['attributes']['attribute_pa_color'], 'attribute_pa_color', $unique_variations)) {
$unique_variations[] = $item;
}
}
?>
<?php foreach($unique_variations as $variation):
$itemVariation = $variation['variation_id'];
?>
<?php
$meta = get_post_meta($variation['variation_id'], 'attribute_pa_color', true);
if (empty($meta)) {
continue;
}
$term = get_term_by('slug', $meta, 'pa_color');
$color = get_field('product_color', $term->taxonomy . '_' . $term->term_id);
$gallery = get_field('gallery', $variation['variation_id']);
$front_image = wp_get_attachment_image_src($variation['image_id'], 'product-thumbnail')[0];
$back_image = null;
if (!empty($gallery)) {
$back_image = $gallery[0]['sizes']['product-thumbnail'];
}
?>
<article class="<?php echo $outOfStock; ?>">
<?php if ($product_status_badge): ?>
<div class="product_badge">
<img src="<?php echo $product_status_badge; ?>" alt="Product status">
</div>
<?php endif; ?>
<div class="product_images">
<?php
if ( ! $product->managing_stock() && ! $product->is_in_stock() ){
?>
<div class="out_of_stock_overlay">Sold Out</div>
<?php
}
?>
<div class="product_image_items">
<figure>
<a href="<?php echo get_the_permalink() ?>?attribute_pa_color=<?php echo $meta ?>" title="<?php echo get_the_title(); ?>">
<img src="<?php echo $item['image']['url'];?>" alt="<?php echo get_the_title(); ?>" class="front_img">
<img src="<?php echo $back_image;?>" alt="<?php echo get_the_title(); ?>" data-test="<?php echo $back_image;?>" class="back_img">
</a>
<div class="product_arrows">
<div class="arrow_left">
<em class="fal fa-chevron-left"></em>
</div>
<div class="arrow_right">
<em class="fal fa-chevron-right"></em>
</div>
</div>
</figure>
</div>
</div>
<div class="product_top">
<div class="product_left">
<h3 class="product_title"><?php echo get_the_title(); ?></h3>
<div class="price">
<?php if ($product->is_type('variable')): ?>
<?php echo $product->get_variation_price() . " " . get_woocommerce_currency_symbol(); ?>
<?php else: ?>
<?php echo $product->get_price_html(); ?>
<?php endif; ?>
</div>
</div>
<?php if ($product->is_type('variable')): ?>
<?php
$unique_variations = [];
foreach($product->get_available_variations() as $key => $item) {
if (!variation_exists($item['attributes']['attribute_pa_color'], 'attribute_pa_color', $unique_variations)) {
$unique_variations[] = $item;
}
}
?>
<div class="product_right">
<ul class="product_variations_list">
<?php foreach($unique_variations as $variation): ?>
<?php
$meta = get_post_meta($variation['variation_id'], 'attribute_pa_color', true);
if (empty($meta)) {
continue;
}
$term = get_term_by('slug', $meta, 'pa_color');
$color = get_field('product_color', $term->taxonomy . '_' . $term->term_id);
$gallery = get_field('gallery', $variation['variation_id']);
$front_image = wp_get_attachment_image_src($variation['image_id'], 'product-thumbnail')[0];
$back_image = null;
if (!empty($gallery)) {
$back_image = $gallery[0]['sizes']['product-thumbnail'];
}
?>
<li class="<?php echo $variation['variation_id'] == $itemVariation ? 'active' : ''; ?>" data-variation-id="<?php echo $variation['variation_id']; ?>" data-variation-image="<?php echo $front_image; ?>" data-variation-back-image="<?php echo $back_image; ?>">
<a href="<?php echo get_the_permalink(); ?>?attribute_pa_color=<?php echo $term->slug;?>" title="<?php echo $term->name; ?>">
<em class="fas fa-certificate primary" style="color: <?php echo $color ;?>;"></em>
<em class="fas fa-certificate secondary"></em>
</a>
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endif; ?>
</div>
<div class="product_bottom">
<ul>
<?php foreach ($attributes as $attribute): ?>
<?php $image = get_field('image', 'pa_specifications_' . $attribute->term_id); ?>
<li>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $attribute->name; ?>">
</li>
<?php endforeach; ?>
</ul>
</div>
</article>
<?php endforeach; ?>
<?php endif;
?>
archive-product.php is not changed :
if ( wc_get_loop_prop( 'total' ) ) {
while ( have_posts() ) {
the_post();
/**
* Hook: woocommerce_shop_loop.
*/
do_action( 'woocommerce_shop_loop' );
wc_get_template_part( 'content', 'product' );
}
}
Been looking for a solution for quite some time now, hopefully someone can help.
The problem:
I'm trying to make a custom product loop in a WP Bakery block (so far so good). The product loop will be added to the frontpage. I've managed to include a quantity field which worked well until I wanted to make it work on AJAX add to cart. Once I made it AJAX it only adds 1 product to cart (as if it doesn't read input from quantity). It seems that everything is working fine when on the product page, so maybe something has to be defined in the WP_Query?
The loop to be displayed on frontpage:
<?php
// Setup your custom query
$args = array( 'post_type' => 'product', 'orderby' => 'date' );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>
<div class="product-content-containers">
<a href="<?php echo get_permalink( $loop->post->ID ) ?>">
<div id="mobclear" style="background-image: url(<?php echo get_the_post_thumbnail_url($loop->post->ID);?>);" class="product-right-content">
</div>
</a>
<div id="descclear" class="product-left-content">
<h3 class="h5">
<a href="<?php echo get_permalink( $loop->post->ID ) ?>">
<?php the_title(); ?>
</a>
</h3>
<p><?php echo apply_filters( 'woocommerce_short_description', $product->post->post_excerpt ) ?></p>
<div>
<p><span class="woocommerce-Price-amount amount customamount"><?php echo $product->get_price(); ?> <span class="woocommerce-Price-currencySymbol"><?php echo get_woocommerce_currency_symbol(); ?></span> pr. stk.</span></p>
<form action="<?php echo esc_url( $product->add_to_cart_url() ); ?>" class="cart" method="post" enctype='multipart/form-data'>
<?php woocommerce_quantity_input(); ?>
<button type="submit" data-quantity="1" data-product_id="<?php echo $product->id; ?>"
class="button alt ajax_add_to_cart add_to_cart_button product_type_simple"><?php echo $label; ?></button>
</form>
</div>
</div>
</div>
<?php endwhile; wp_reset_query(); // Remember to reset ?>
You had some invalid use of $loop->post->ID which within the loop when you've declared the_post() would be simply $post->ID
Also, $product->id should be $product->get_ID() if you're using the latest WC version.
This below is working in my test.
// Setup your custom query
$args = array( 'post_type' => 'product', 'orderby' => 'date' );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); global $product;
?>
<div class="product-content-containers">
<a href="<?php echo get_permalink( $post->ID ) ?>">
<div id="mobclear" style="background-image: url(<?php echo get_the_post_thumbnail_url($post->ID);?>);" class="product-right-content">
</div>
</a>
<div id="descclear" class="product-left-content">
<h3 class="h5">
<a href="<?php echo get_permalink( $post->ID ) ?>">
<?php the_title(); ?>
</a>
</h3>
<p><?php echo apply_filters( 'woocommerce_short_description', $post->post_excerpt ) ?></p>
<div>
<p><span class="woocommerce-Price-amount amount customamount"><?php echo $product->get_price(); ?> <span class="woocommerce-Price-currencySymbol"><?php echo get_woocommerce_currency_symbol(); ?></span> pr. stk.</span></p>
<form action="<?php echo esc_url( $product->add_to_cart_url() ); ?>" class="cart" method="post" enctype='multipart/form-data'>
<?php woocommerce_quantity_input(); ?>
<button type="submit" data-quantity="1" data-product_id="<?php echo $product->get_ID(); ?>"
class="button alt ajax_add_to_cart add_to_cart_button product_type_simple"><?php echo $label; ?></button>
</form>
</div>
</div>
</div>
<?php endwhile; wp_reset_query(); // Remember to reset ?>
<script type="text/javascript">
jQuery('input[name="quantity"]').change(function(){
var q = jQuery(this).val();
jQuery('input[name="quantity"]').parent().next().attr('data-quantity', q);
});
</script>
Following the guide here http://www.w3bdeveloper.com/how-to/how-to-get-regular-price-of-a-product-in-wordpress-woocommerce/
Using the following code to call the price inside the loop, the price is displaying the wrong price per item.
The first item has no price, the second item has the first items price, the third item has the second price and so on.
<div class='price'>
<?php echo $product->regular_price; ?>
</div>
If I use <?php echo $product->get_price_html(); ?> it displays correctly, but I'd like to be able to display the sale price and the regular price separately. Also for some reason, if I use this code before the button code, I get a fatal error.
The loop code is as follows:
<div class='post'>
<a class='oxy-post-image' href='<?php the_permalink(); ?>'>
<div class='oxy-post-image-fixed-ratio' style='background-image: url(<?php echo get_the_post_thumbnail_url(); ?>);'></div>
<div class='price-overlay'>
<?php echo $product->regular_price; ?>
</div>
</a>
<div class='post-wrapper'>
<a class='oxy-post-title' href='<?php the_permalink(); ?>'><?php the_title(); ?></a>
<div class='oxy-post-meta'>
<div class='cart-button'>
<?php global $product; echo apply_filters( 'woocommerce_loop_add_to_cart_link',
sprintf( '%s',
esc_url( $product->add_to_cart_url() ),
esc_attr( $product->get_id() ),
esc_attr( $product->get_sku() ),
$product->is_purchasable() ? 'add_to_cart_button' : '',
esc_attr( $product->get_type() ),
esc_html( $product->add_to_cart_text() ) ),$product ); ?>
</div>
</div>
</div>
</div>
A screenshot of the items in the loop:
Try to declare global $product before using echo $product->regular_price; so :
<div class='price-overlay'>
<?php global $product; echo $product->regular_price; ?>
</div>
I fixed all woocommerce deprecated functions except one,maybe someone can help me out.I am no professional. Thank You.
The only plugin activated is woocommerce so there is no plugin conflict problem.The wordpress is up to date so is woocommerce.
I am getting this notice,and from what I see the problem comes from page.php.
Notice: post was called incorrectly. Product properties should not be accessed directly. Backtrace: require('wp-blog-header.php'), require_once('wp-includes/template-loader.php'), include('/themes/barbuto/page.php'), WC_Abstract_Legacy_Product->__get, wc_doing_it_wrong Please see Debugging in WordPress for more information. (This message was added in version 3.0.) in /home/public_html/dev/wp-includes/functions.php on line 4139
This is the code from page.php file.
get_header(); ?>
<?php if(is_front_page()){ ?>
<!-- start of banner -->
<div class="banner" style="background: url('<?php echo wp_get_attachment_url(get_post_thumbnail_id($post->ID)); ?>') no-repeat scroll center center transparent;">
</div>
<!-- end of banner -->
<div class="wrapper">
<ul class="products">
<?php
$args = array( 'post_type' => 'product', 'posts_per_page' => 1, 'meta_key' => '_featured', 'meta_value' => 'yes', );
$loop = new WP_Query( $args );
echo "<h1>"; count($loop); echo "</h1>";
$i=1;
while ( $loop->have_posts() ) : $loop->the_post(); global $product; global $woocommerce; ?>
<div class="product_featured_img <?php echo $loop->post->ID; ?> <?php if(($loop->post->ID == '405') || ($loop->post->ID == '72')){ echo 'bottol';} ?>">
<a href="<?php echo get_permalink( $loop->post->ID ) ?>" title="<?php echo esc_attr($loop->post->post_title ? $loop->post->post_title : $loop->post->ID); ?>">
<?php woocommerce_show_product_sale_flash( $post, $product ); ?>
<?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'large'); else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" />'; ?>
</a>
</div>
<div class="bottol_text product_featured_content">
<h3>
<a href="<?php echo get_permalink( $loop->post->ID ) ?>"
title="<?php echo esc_attr($loop->post->post_title ? $loop->post->post_title : $loop->post->ID); ?>">
<?php the_title(); ?>
</a>
</h3>
<p>
<?php
//$text_length = count($product->post->post_content);
//if($text_length > 1000){
// echo substr($product->post->post_content,0,2000).'...';
/*} else { */
echo $product->post->post_content;
//}
?>
</p>
<?php if ( is_user_logged_in() ) { ?>
<p class="price"><?php echo $product->get_price_html(); ?></p>
<div class="add_box">
<a class="add_to_cart_button button product_type_simple" data-product_sku="<?php echo $product->get_sku(); ?>" data-product_id="<?php echo $loop->post->ID;?>" rel="nofollow" href="<?php echo $product->add_to_cart_url(); ?>" > add to cart </a>
</div>
<?php }else{echo '' . __('PLEASE LOGIN/REGISTER TO VIEW PRICES', 'theme_name') . '';}?>
</div>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</ul><!--/.products-->
</div>
Replace this line echo $product->post->post_content; with echo $loop->post->post_content;
I'll try to word this the best I can:
My blog homepage has 4 feeds of "Latest from: (a category)" fed by 4 different categories, each showing 2 posts. I discovered the do_not_duplicate method and used that to prevent any of them from showing up twice (since the authors use multiple categories on each post to populate our blog). This works great, but here is my next issue:
If a post has multiple categories that populate the home page, it will post in just one category and not duplicate (as wanted), but the other category it is in now only shows just 1 post, where I'd like it to show 2. Since the 2nd 'missing' post is the duplicate, not be shown, I'm wondering how I can show the next (3rd) post in that category, if the duplicate is being hidden.
Here is my current code:
<!-- BEGIN WP PHP BLOG INSERT-->
<?php query_posts('category_name=campuses&showposts=2'); //Get 2 most recent posts from category with slug campuses ?>
<h2 class="cat"><?php if (have_posts()) single_cat_title("Latest from: ", true) //if there are posts in the category, display the category name in an H2 ?></h2>
<?php if (have_posts()) while (have_posts()) : the_post(); $do_not_duplicate[] = $post->ID; // prevents the post from showing up twice on home page?>
<?php if ( has_post_thumbnail()) : //check to see if the post has a featured image ?>
<a class="postthumb" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
<?php the_post_thumbnail(category-thumb); ?>
</a>
<?php elseif( catch_that_image() ) : ?>
<a class="postthumb" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" ><img height="150px" src="<?php echo catch_that_image() ?>" /></a>
<?php endif; ?>
<h3 class="recent"><?php the_title(); ?></h3>
<?php the_excerpt ()?><br class="clear" />
<?php endwhile;?>
<?php query_posts('category_name=programs&showposts=2'); //Get 2 most recent posts from category with slug programs?>
<?php if (have_posts()) single_cat_title('<h2 class="cat">Latest from: ', true) //if there are posts in the category, display the category name in an H2 ?></h2>
<?php if (have_posts()) while (have_posts()) : the_post(); if ( in_array( $post->ID, $do_not_duplicate ) ) continue; // prevents the post from showing up twice on home page?>
<?php if ( has_post_thumbnail()) : //check to see if the post has a featured image ?>
<a class="postthumb" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
<?php the_post_thumbnail(category-thumb); ?>
</a>
<?php elseif( catch_that_image() ) : ?>
<a class="postthumb" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" ><img height="150px" src="<?php echo catch_that_image() ?>" /></a>
<?php endif; ?>
<h3 class="recent"><?php the_title(); ?></h3>
<?php the_excerpt ()?><br class="clear" />
<?php endwhile;?>
<?php query_posts('category_name=online&showposts=2'); //Get 2 most recent posts from category with slug online?>
<?php if (have_posts()) single_cat_title('<h2 class="cat">Latest from: ', true) //if there are posts in the category, display the category name in an H2 ?></h2>
<?php if (have_posts()) while (have_posts()) : the_post(); if ( in_array( $post->ID, $do_not_duplicate ) ) continue; // prevents the post from showing up twice on home page?>
<?php if ( has_post_thumbnail()) : //check to see if the post has a featured image ?>
<a class="postthumb" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
<?php the_post_thumbnail(category-thumb); ?>
</a>
<?php elseif( catch_that_image() ) : ?>
<a class="postthumb" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" ><img height="150px" src="<?php echo catch_that_image() ?>" /></a>
<?php endif; ?>
<h3 class="recent"><?php the_title(); ?></h3>
<?php the_excerpt ()?><br class="clear" />
<?php endwhile;?>
<?php query_posts('category_name=service-applied-learning&showposts=2'); //Get 2 most recent posts from category with slug service-applied-learning ?>
<h2 class="cat"><?php if (have_posts()) single_cat_title("Latest from: ", true) //if there are posts in the category, display the category name in an H2 ?></h2>
<?php if (have_posts()) while (have_posts()) : the_post(); if ( in_array( $post->ID, $do_not_duplicate ) ) continue; // prevents the post from showing up twice on home page?>
<?php if ( has_post_thumbnail()) : //check to see if the post has a featured image ?>
<a class="postthumb" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
<?php the_post_thumbnail(category-thumb); ?>
</a>
<?php elseif( catch_that_image() ) : ?>
<a class="postthumb" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" ><img height="150px" src="<?php echo catch_that_image() ?>" /></a>
<?php endif; ?>
<h3 class="recent"><?php the_title(); ?></h3>
<?php the_excerpt ()?><br class="clear" />
<?php endwhile;?>
<?php if( function_exists( 'wp_pagenavi ' ) ) {
wp_pagenavi();
} else {
next_posts_link('Older Posts');
previous_posts_link(' | Newer Posts');
} ?>
</div>
</div>
<div class="sidebar-wrapper">
<?php get_sidebar(); ?>
</div>
<!--END WP PHP BLOG INSERT-->
Not sure if this will help but it looks as though you need to reset your query_posts(); to give it another clean run
After each <?php endwhile;?> you would add
<?php wp_reset_query(); ?>
https://codex.wordpress.org/Function_Reference/wp_reset_query
Quote:
wp_reset_query() restores the $wp_query and global post data to the original main query. This function should be called after query_posts(), if you must use that function. As noted in the examples below, it's heavily encouraged to use the pre_get_posts filter to alter query parameters before the query is made.
Calling wp_reset_query is not necessary after using WP_Query or get_posts as these don't modify the main query object. Instead use wp_reset_postdata.