I want to create a conditional logic quiz (chained quiz) with wpbakery. I want to click on a column and then show a diferent row. On click i want to hide the first row. I've already got the code for the first part but cant seem to figure out how to hide the first row.
// CSS - Add wherever you put your custom CSS.
body:not(.compose-mode) .my-hidden-row:not(.my-hidden-row--active) {
display: none;
}
// PHP - Add to child theme functions.php or via Code Snippets plugin.
add_action( 'wp_footer', function() { ?>
<script>
document.addEventListener( 'click', function( event ) {
button = event.target.closest( '.my-hidden-row-toggle' );
if ( ! button ) {
return;
}
var link = button;
if ( 'A' !== link.tagName ) {
link = button.querySelector( 'a' );
}
if ( ! link ) {
return;
}
var href = link.getAttribute( 'href' );
if ( ! href ) {
return;
}
var hiddenRow = document.querySelector( href );
if ( hiddenRow ) {
hiddenRow.classList.toggle( 'my-hidden-row--active');
}
event.preventDefault();
event.stopPropagation();
} );
</script>
<?php }, 99 );
Related
I am trying to disable "add to cart" button on WooCommerce shop and archives pages if product's quantity stock is zero or less.
I don't want to hide it so I came up with the code below.
My issue is that code doesn't add style to element, it replaces the whole button code inside html tree so button is not displayed at all.
Any ideas on how to overcome the issue?
add_action( 'woocommerce_loop_add_to_cart_link', 'remove_price_from_variable_products', 9 );
function remove_price_from_variable_products() {
global $product;
if( $product->get_stock_quantity() <= 0 ) {
?>
<style>
.add_to_cart_button {
cursor: not-allowed !important;
}
</style>
<?php
add_action( 'woocommerce_after_shop_loop_item', 'custom_content_addtocart_button', 100 );
}
}
function custom_content_addtocart_button() {
echo '<br/><div class="button-notice">Contact Us for more information</div>';
}
To add/edit/remove CSS classes from the existing add to cart button on WooCommerce shop and archives pages you can use the woocommerce_loop_add_to_cart_args filter hook
So you get:
function action_woocommerce_loop_add_to_cart_args( $wp_parse_args, $product ) {
// Initialize
$custom_class = '';
// Certain condition, can be anything, in this specific case for the stock quantity. ADAPT TO YOUR NEEDS
if ( $product->get_stock_quantity() <= 0 ) {
$custom_class = 'button-not-allowed';
}
// NOT empty (from here on, no need to make any changes to my answer)
if ( ! empty ( $custom_class ) ) {
// Class
$wp_parse_args['class'] = implode(
' ',
array_filter(
array(
'button' . ' ' . $custom_class,
'product_type_' . $product->get_type(),
$product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
$product->supports( 'ajax_add_to_cart' ) && $product->is_purchasable() && $product->is_in_stock() ? 'ajax_add_to_cart' : '',
)
)
);
}
return $wp_parse_args;
}
add_filter( 'woocommerce_loop_add_to_cart_args', 'action_woocommerce_loop_add_to_cart_args', 10, 2 );
Note: the $product->get_stock_quantity() function is best used in combination with $product->managing_stock(), but this depends on your needs
Then apply the following CSS
.button-not-allowed {
cursor: not-allowed !important;
}
Is there a hook that I can use to change the customer column heading to the company name?
As mentioned in the comments there are no hooks you can use here as the Analytics pages are rendered via JavaScript.
The code snippet below will add a mutation observer checking if the table on the order analytics page is changing (as these headers are being added dynamically via JavaScript). Each time a change (mutation) is registered it checks for the 'Customer' header. If it is found it is changed to 'Company name'. Perhaps not the most elegant solution but it does work.
add_action( 'admin_footer', 'woocommerce_analytics_change_customer_header' );
function woocommerce_analytics_change_customer_header() {
if ( isset( $_GET['page'] ) && isset( $_GET['path'] ) ) {
if ( $_GET['page'] == 'wc-admin' && $_GET['path'] == '/analytics/orders' ) {
?>
<script>
jQuery( function( $ ) {
// select the target node
var target = document.querySelector('#woocommerce-layout__primary');
// create an observer instance
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if ( $('th.woocommerce-table__header').length ) {
$('th.woocommerce-table__header').each(function(){
let $label = $(this).find('span');
if ( $label.text() == 'Customer' ) {
$label.text('Company name');
}
});
}
});
});
// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true, subtree: true };
// pass in the target node, as well as the observer options
observer.observe(target, config);
});
</script>
<?php
}
}
}
This code snippet should be added to the functions.php of your child theme or via a plugin like Code Snippets.
I want to append something to a wordpress navigation menu. My code here works, however, right now it puts my content inside the "a" tag of each item. I want it OUTSIDE of the "a" tag - right before the closing "li" tag of each item.
I have searched high and low but the wordpress documentation is limited regarding this...
add_filter('wp_nav_menu_objects', 'my_wp_nav_menu_objects', 10, 2);
function my_wp_nav_menu_objects( $items, $args ) {
if( $args->theme_location == 'main-menu' ) {
// loop
foreach( $items as &$item ) {
// vars
$mytext = "content";
// append
if( $mytext ) {
$item->title .= $mytext;
}
}
}
// return
return $items;
}
I am using this script in an attempt to set the visibility styling of a div and store it as a cookie, site-wide. My understanding is that path=/ should set the cookie to store at the root and thus be available to all pages - passing the value to the other pages to either keep the div's visibility, visible or hidden, depending on the users preference. However, checking the output, it appears as though the cookie is only being stored 'per-page'. What am I missing? I have placed the script in the header and it is loaded on every custom post/page of my wp theme. (omitted) - there is a toggle button top left of the page, show/hide comments.
// Placed above </head> tag on my header-webmockups.php file
<script type="text/javascript">
$( function () {
var toggle = $( '.toggle' );
var comments = toggle.find( '.comments' );
if ( $.cookie( 'divState' ) == 'visible' )
comments.show();
else
comments.hide();
toggle.find( 'a' ).click( function () {
if ( comments.is( ':visible' ) )
$.cookie( 'divState', 'hidden' );
else
$.cookie( 'divState', 'visible' );
comments.toggle();
} );
} );
$.cookie( "divState", 1, {
expires: 10000
} );
</script>
// Placed at the top of my comments.php loop (toggle div closes after page content)
<div class="toggle"><a>Show/Hide Comments</a>
// Placed after <?php wp_head(); ?> of post's custom header.php
<?php wp_enqueue_script("jquery-cookie", get_stylesheet_directory_uri().'/js/lib/jquery.cookie.js', array( 'jquery' ), '0'); ?>
You need to add expiration date to your cookie.
For example
$.cookie("test", 1, { expires : 10000 });
As i see from your URL and code, you haven't set it and it works in current session only.
So after all your script block should look like so: (remove current block entirely and paste this one)
<script type="text/javascript">
jQuery( function ($) {
var toggle = $( '.toggle' );
var comments = toggle.find( '.comments' );
if ( $.cookie( 'divState' ) == 'visible' )
comments.show();
else
comments.hide();
toggle.find( 'a' ).click( function () {
if ( comments.is( ':visible' ) )
$.cookie( 'divState', 'hidden', {expires: 10000, path: '/'} );
else
$.cookie( 'divState', 'visible', {expires: 10000, path: '/'} );
comments.toggle();
} );
} );
</script>
I want to show error message if no category selected while adding a new post?
You can check it via jquery:
/* Checks if cat is selected when publish button is clicked */
jQuery( '#submitdiv' ).on( 'click', '#publish', function( e ) {
var $checked = jQuery( '#category-all li input:checked' );
//Checks if cat is selected
if( $checked.length <= 0 ) {
alert( "Please Select atleast one category" );
return false;
} else {
return true;
}
} );
and output error message as you want.
You can do that by using the admin_notices hook. Just add the following code in your functions.php file:
function wp_823232_admin_notice__no_category_error()
{
?>
<div class="notice notice-error is-dismissible">
<p><?php _e('Warning: No category is selected for this post!', 'sample-text-domain'); ?></p>
</div>
<?php
}
function wp_823232_check_category()
{
global $pagenow;
global $post;
if ($pagenow == 'post-new.php' || $pagenow == 'post.php') {
if (count(get_categories($post->ID)) == 1 && has_category("uncategorized", $post->ID)) {
add_action('admin_notices', 'wp_823232_admin_notice__no_category_error');
}
}
}
add_action('in_admin_header', 'wp_823232_check_category');