I've hunted high and low how to move reviews tab and bring it below product description.
How can this be done with CSS or plugin?
And reviews will be shown 25 at once with read more button that opens another 25 reviews.
Woocommerce uses jQuery (Javascript) to put reviews and content descriptions in separate tabs.
In this tutorial I use Javascript to put wordpress comments below the content after page loading has finished. For this do fast as I did in my wordpress sample page.
Go to header.php file in your themes, edit <body> tag to include <body> tag onload="myFunctiondf()" then it looks like below :
<body onload="myFunctiondf()">
or if you have class in your theme looks like this :
<body <?php body_class(); ?> onload="myFunctiondf()">
Now go to footer.php, include this code before </body> which looks like this:
<script>
function myFunctiondf() {
document.getElementById("tab-reviews").style.display="block";
document.getElementById("tab-description").style.display="block";
document.getElementById("tab-title-reviews").style.display="none";
document.getElementById("tab-title-description").style.display="none";
}
</script>
</body>
Congratulation from now your product pages works as mine.
The following link from the WooCommerce docs should help you: https://docs.woocommerce.com/document/editing-product-data-tabs/
Re-ordering Tabs:
add_filter( 'woocommerce_product_tabs', 'woo_reorder_tabs', 98 );
function woo_reorder_tabs( $tabs ) {
$tabs['reviews']['priority'] = 5; // Reviews first
$tabs['description']['priority'] = 10; // Description second
$tabs['additional_information']['priority'] = 15; // Additional information third
return $tabs;
}
Related
I found a code snippet to display the content before the main content and it worked.
Currently the content is displayed on all pages. (except shop page)
The code :
add_action( 'woocommerce_before_main_content', 'BannerShop', 35 );
function BannerShop(){
if(!is_shop()){
echo '<img src="https://localhost/demosite/wp-content/uploads/2015/06/512x356.png" >';
}
}
What I want to ask is, how to display content only for color attribute products in the form of links.
Example :
The display (content) will ONLY SHOW when the url is like this :
mysite.com/color/red/
Sorry if the explanation is not good because I don't really understand this.
Any help is greatly appreciated.
thank you
I understand your question is about displaying that extra content, if the current query is for a product archive page only showing products of a certain attribute 'color'.
Each WooCommerce attribute is an independent taxonomy.
WordPress's is_tax('parameter') function checks, if the query is for an existing custom taxonomy archive page (other than category & tag) & if the query is for that specific taxonomy 'parameter', in your case 'color'.
So, this code snippet in your functions.php or equivalent plugin should work:
add_action( 'woocommerce_before_main_content', 'BannerShop', 35 );
function BannerShop(){
(is_tax('color')) {
echo '<img src="https://localhost/demosite/wp-content/uploads/2015/06/512x356.png" >';
}
}
Though, to make the above template WooCommerce override work, declare WooCommerce support for your theme by adding the following lines to your functions.php or plugin equivalent:
function theme_add_woocommerce_support() {
add_theme_support( 'woocommerce' );
}
add_action( 'after_setup_theme', 'theme_add_woocommerce_support' );
I have a Wordpress page that uses Disqus comments. At the bottom of the page I have this:
<!-- DISQUS COMMENTs -->
<div id="comments">
<div id="disqus_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
var disqus_config = function () {
this.page.url = '<?php the_permalink(); ?>'; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = '<?php the_ID(); ?>'; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://example.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
</div>
<!-- /#comments -->
and in my page I display how many comments have been made on the current post like so:
0 Comments
The trouble is, it's not working. The comments always appear as zero even though there are comments on the page. And I think I know why this happens, but I'm not sure how to property resolve it.
So:
My 'comments' anchor renders like so:
0 Comments
And in my JavaScript code at the bottom, the page URL gets set correctly like so:
this.page.url = 'https://www.example.com/blog/my-post-name'
However if I post a comment and log in to my Disqus control panel and hover over the post URL, the URL format is like so:
https://www.example.com/blog/?p=232
So it seems like the Disqus JavaScript is reading the URL of the page before the URL has been rewritten! Does that make sense?
A potential way to resolve it is to make my comments anchor render like so:
0 Comments
But that feels a bit hacky. Any ideas anyone?
Thanks!
UPDATE
I can confirm that rendering my comments anchor like so will work:
0 Comments
However this is more of a workaround. How can I make Disqus store my rewritten (cleaner looking) URLs instead of the Wordpress 'Plain' (and ugly) URL?
function disqus_embed($disqus_shortname) {
global $post;
wp_enqueue_script('disqus_embed','http://'.$disqus_shortname.'.disqus.com/embed.js');
echo '<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = "'.$disqus_shortname.'";
var disqus_title = "'.$post->post_title.'";
var disqus_url = "'.get_permalink($post->ID).'";
var disqus_identifier = "'.$disqus_shortname.'-'.$post->ID.'";
</script>'; }
Use this code
<?php disqus_embed('myexampleblog'); ?>//replace myexampleblog with your blog or site name register on disqus.
anywhere you want in your single.php and page.php files to embed and show Disqus comments for that page.
This is what I need to do:
To target only the main shop page with CSS (a specific custom class I created as mentioned below).
This is what I've done and tried so far:
I have an override template of archive-product.php in my child theme.
In this override template I've added a div with a custom class custom-shop-class just before the product loop start, because I want to target the looped products specifically.
I tried targeting with class page-id-4 because if I hover over the "shop" page in wp-admin, it gave me http://.../post.php?post=4&action=edit
The problem I'm having is as follows:
From what I've discovered is that the same archive-product.php template is being used in the other various shop pages and not only in the main "shop" page (correct me if I'm wrong), so when I target my custom-shop-class with CSS, it affects all the other shop pages using the same template file, and it must not.
There is no unique identifier or class specifically for the shop page, something like the page-id-?? class in the body tag (as in the usual WP pages).
Any suggestions on the best method/solution?
Set a conditional statement to check for the primary shop page, then echo the div in question if that statement evaluates to true.
WooCommerce Conditional Tag for main shop page:
is_shop()
Example
if (is_shop()) {
echo "<div class='custom-shop-class'></div>";
} else {
echo "<div class='custom-product-category-class'></div>";
}
Alternatively:
<?php if (is_shop()):?>
<div class="custom-shop-class"></div>
<?php else: ?>
<div class="custom-product-category-class"></div>
<?php endif;?>
Conditional Tags | WooThemes Documentation
Using the filter body_class with the is_shop conditional you can target the main WooCommerce shop page.
add_filter( 'body_class', 'woo_shop_class' );
// Add WooCommerce Shop Page CSS Class
function woo_shop_class( $classes ) {
if ( is_shop() ) // Set conditional
$classes[] = 'woo-shop'; // Add Class
return $classes;
}
The code goes in your themes functions.php file.
To build on the answer provided here, how might I go further and add a unique identifier to the shop page based on the active WPML language? (I'm basically trying to reduce a font size on the German version of the shop page only - it's proving surprisingly difficult to do)
I am setting up a wordpress theme and it has the "logo" h1 tag at the top which shows the title of the site. On the blog page specifically though I'd like to change the title in the H1 tag.
I am aware there may be some php that does something like this: if blog page show this h1 tag (code) and for every other page show this h1 tag (code).
Is this possible?
Thanks kindly
Please use the below code instead of code which is now using to display the page title.
<?php
if ( is_page( '{enter your blog page slug here}' ) ) {
echo '<h1>{enter your blog page title here}</h1>';
} else {
echo '<h1>{enter your non-blog page title here}</h1>';
}
?>
You can query your current page template with meta.
You can get current page template this meta tag:
_wp_page_template
And full code:
if( get_post_meta($post->ID, '_wp_page_template', true) == "your-template.php" ){
// current page is created with your template
} else{
// other page template or defult template
}
Assuming you have separate template for your blog page, like blog.php in your theme directory.
Then you should follow below code:
if ( is_page_template( 'blog.php' ) ) {
// Current Template is Blog
} else {
// Other Pages
}
More info: http://codex.wordpress.org/Function_Reference/is_page_template
Update:
If blog the one of your page in WordPress then follow below code:
if(is_page('id or slug of WP Blog Page')) {
// This is blog page
} else {
// This is other page
}
If that does not work then you should try including different header files using get_header function.
More Info: http://codex.wordpress.org/Function_Reference/get_header
Suggestion: I would suggest to create new page template for your blog page and then you are good to go. You can refer this to create new page template and assign to page.
I have an Author page on my Wordpress site (author.php). The problem though is that when im visiting the author page, Wordpress highlights the blog menu item. I want to have another menu item as parent. How do I go about it? I dont want to use no JS/jQuery for this.
Thanks
It's not clear that how your author page url looks like. In general its like site url/author/"author name".
If your site has a single author then you can add the author page link as a custom menu item .
Or you can use jQuery function to search "author" in your url and add active class in desired menu item
<script type="text/javascript">
$(document).ready(function () {
if(if(window.location.href.indexOf("author") > -1))
{
$("#author_menu").addClass('active');
}
});
</script>
Not the cleanest solution, but I use something like this for a few instances of current page menu highlighting for pages that aren't child/parent related in any way:
<?php if (is_author()) { ?>
<script type="text/javascript">
jQuery(function($) {
$(document).ready(function() {
$('#menu-main-menu li.menu-item-"**about_us_page_class**"').addClass('current-menu-item');
}); });
</script>
<?php } ?>