Category: Work Exp.

  • How to change Elementor Header via custom code

    Hello Folks, ever need to change the Elementor header via custom code. Or need extra conditions, that elementor-pro do not provide?

    Assuming, you are using Elementor and Elementor-Pro

    First, we hook into ‘elementor/theme/before_do_{$locations}’

    $location is our ‘header’ 

    add_action( 'elementor/theme/before_do_header', 'custom_maybe_change_elementor_header' );

    Then in our callback function, we first remove the default location header.

    This location seems like an array where the chosen header is going to be printed.

    Here

    1. $obj is ElementorPro\Modules\ThemeBuilder\Classes\Locations_Manager Object
    2. 10 is the header ID we want to replace. You can either inspect the header element in the front end or edit the header in Theme Builder and find the desired header ID.
    $obj->remove_doc_from_location( 'header', '10');

    Then, we add our preferred header ID e.g. 12

    $obj->add_doc_to_location( 'header', '12');

    Note, if you do not remove the applied header first, then both headers will show up, Maybe this is not what you want.

    Overall our custom_maybe_change_elementor_header() function will look likes this

    function custom_maybe_change_elementor_header( $obj ): void { 
        // ElementorPro\Modules\ThemeBuilder\Classes\Locations_Manager Object
	$obj->remove_doc_from_location( 'header', 232816 ); // Global Header - pages with banner
	$obj->add_doc_to_location( 'header', 250048 ); // Global Header - pages without banner
}

    You can have your various conditions based on your situation, to hook the before_do_header

    Lets say, there is a query string (www.example.com/?activate=yes, in the home page, where the header is applied to entire site. But you can check that condition to to apply other header, only when there is a query string in URL.

    add_action('init', function() {

    $is_activate = isset( $_GET['activate'] ) && $_GET['activate'] === 'yes';
   
    if( $is_activate ) {
         add_action( 'elementor/theme/before_do_header', 'custom_maybe_change_elementor_header' );
    }

});

    As always, you can place this code in your child theme functions.php file at the end.

    Hope, this helps to someone. Good bye.

  • WooCommerce Show Reviews in Separate Standalone Page

    WooCommerce Show Reviews in Separate Standalone Page

    Hi Folks, it is me again. Sometimes we want to show all reviews (perhaps only 5 ⭐⭐⭐⭐⭐) in a separate page for our end users. Obviously to make our customers we have many great 5 star reviews.

    I could not find a perfect solution for this. So, I made a quick shortcode function to acheive this.

    Lets start, shall we?

    Following codes can be put into your child theme > functions.php file

    First we create our shortcode

    add_shortcode( 'woo_reviews', 'show_reviews' );

    Then we define our shortcode function

    function show_reviews( $atts ) {

$atts = shortcode_atts( array(
'rating' => '',
'product' => '',
), $atts, 'woo_reviews' );

// set up meta query to filter by rating if specified
$meta_query = array();
if ( $atts['rating'] ) {
$meta_query[] = array(
'key' => 'rating',
'value' => $atts['rating'],
'compare' => '='
);
}

$comments_query = new WP_Comment_Query( array(
'post_type' => array( 'product' ),
'post__in' => $atts['product'],
'meta_query' => $meta_query,
) );

// Output buffer to capture wp_list_comments
ob_start();

if ( ! empty( $comments_query->comments ) ) {
echo '<div class="woocommerce">';
echo '<div id="reviews">';
echo '<div id="comments">';
echo '<ol class="commentlist">';
wp_list_comments( apply_filters( 'woocommerce_product_review_list_args', array( 'callback' => 'woocommerce_comments' ) ), $comments_query->comments );
echo '</ol>';
echo '</div>';
echo '</div>';
echo '</div>';
} else {
echo '<p>No reviews found.</p>';
}

return ob_get_clean();
}

    Oh by the way you can do following things as well

    [woo_reviews rating="5"]
    [woo_reviews product="33,34"]
  • WooCommerce change coupon success message.

    WooCommerce change coupon success message.

    Not everyday scenario, but sometimes you would like to have a custom message when the coupon is applied to your woocommerce shop.

    Straight to the code.

    add_filter( 'woocommerce_coupon_message', 'change_coupon_message', 3, 10 );

function change_coupon_message( $msg, $msg_code, $coupon_obj ) {

	$coupon_code = $coupon_obj->get_code();
	$coupon_desc = $coupon_obj->get_description();

	if ( $msg_code === 200 ) {
		return $coupon_desc;
	}

	return $msg;
}

    Here, we are applying a filter hook, to change the woocommerce default “Coupon applied successfully” message.

    We are hooking up a custom function that checks if the $msg_code is 200 i.e. it applied successfully.

    But we will like our custom message. In this case I have get the description from the coupon settings which also makes it dynamic. Every coupon can have its own custom message.

    And finally, we return $msg that is to be displayed.

  • Contact Form 7 – Dynamically Set (To) Admin Email Address

    Contact Form 7 – Dynamically Set (To) Admin Email Address

    Most of us here in WordPress community have known and used the Contact Form 7(CF7) throughout our entirety. I personally have used it in every single website I have built. Unless client wants otherwise. It is my go to plugin. It is simple, tried and tested and well maintained since dawn of the dinosaurs (you get the idea).

    But there is one little thing that I came to know recently. Hmmnnn……

    So, what happens is, when you create a website, install and activate the Contact Form 7 plugin, it will automatically get the site’s admin email address from Settings > General > Administration Email Address
    Generally, this email address will be developers generic email address or could be clients generic email address.

    Let’s say you have created five different forms and all five forms now have same admin email address as “To” field.
    When deploying the site,  now the generic admin email address is to be changed. The issue here is, CF7 will not automatically detect the change in admin email address and we manually have to go to each form and change the “To” recipient email address to new. Not so happy, are you?

    Heck, we might even forget it and never change it manually until someone reminds us about it.

    So, to solve this, we can use “special mail tags” like [_site_admin_email] from the start and do not worry about change in the admin email address ever, well if it is intended in that way.
    So, here you go Special mail-tags of CF7 is the answer.

  • LearnPress Lesson Template Changes : Part 2

    LearnPress Lesson Template Changes : Part 2

    This is the new and updated version of my article here: LearnPress Lesson Template Changes

    I got to admit, it is quite simpler in terms of files than before.
    Turns out it is now possible to edit with only CSS and make our Header and Footer show in current implementation of LearnPress plugin.

    WordPress Version : 5.7.2
    Theme Twenty Twenty-One : 1.3
    LearnPress Version : 4.0.7

    Quick Start

    Here, is the fast answer you need and keep on moving.

    /*Learn Press Lesson Template Design Changes*/
html {
    overflow: visible !important;
}

#popup-course {
    position: relative !important;
    flex-wrap: wrap;
}

#popup-course > div {
    position: relative;
    flex-basis: 100%;
}

#popup-course #popup-header {
    position: absolute !important;
}

#popup-course #popup-content {
    flex-basis: calc(100% - 475px) !important;
}

#popup-course #popup-footer {
    position: absolute !important;
}

    Contain the width

    Now if the lesson content area is full width, and you want it contained, like the header and footer, we need to do more. Not necessarily important, but could be helpful to someone.

    Lets contain the main section

    main#main {
    max-width: var(--responsive--alignwide-width); // this is the max-width you want your container to be e.g.1170px
    margin: 0 auto;
    border: 1px solid;
}

    Lets make the curriculum sidebar smaller around 300px.

    #popup-course #popup-sidebar {
    flex: 0 0 300px !important;
}
#popup-course #popup-sidebar .course-curriculum {
    width: 300px !important;
}

    After that compensate the “300px” width to lesson’s header, footer, toggle collapse arrow

    #popup-course #popup-header,
#popup-course #popup-footer,
#popup-course #sidebar-toggle {
    left: 300px !important;
}

    And finally adjust toggled case

    body.lp-sidebar-toggle__close #popup-course #popup-sidebar {
    flex: 0 0 0 !important;
}

body.lp-sidebar-toggle__close #popup-course>#sidebar-toggle,
body.lp-sidebar-toggle__close #popup-course #popup-header,
body.lp-sidebar-toggle__close #popup-course #popup-footer {
    left: 0 !important;
}

    P.S. For responsive, you’re on your own. 🙂

  • Yith WooCommerce Subscriptions : List all the active subscribers

    Yith WooCommerce Subscriptions : List all the active subscribers

    In order to do a custom listing of active subscriptions in Yith WooCommerce Subscription plugin, here is the code you can write:
    Assuming your WordPress database table prefix is the default: “wp_”

    
function list_all_subscriptions() {

	global $wpdb;

	$query= "";
	$query .= "SELECT wp_posts.* FROM wp_posts ";
	$query .= "INNER JOIN wp_postmeta ON ( wp_posts.ID = wp_postmeta.post_id ) ";
	$query .= "WHERE 1=1 ";
	$query .= "AND wp_posts.post_type = 'ywsbs_subscription' ";
	$query .= "GROUP BY wp_posts.ID ";
	$query .= "ORDER BY ID DESC";

	$subscribers = $wpdb->get_results( $query );
}

    Hell, if you want to move one step further and list only active members, then you can throw “AND” condition in the query itself, like below;

    
function list_all_subscriptions() {

	global $wpdb;

	$query= "";
	$query .= "SELECT wp_posts.* FROM wp_posts ";
	$query .= "INNER JOIN wp_postmeta ON ( wp_posts.ID = wp_postmeta.post_id ) ";
	$query .= "WHERE 1=1 ";
	$query .= "AND wp_posts.post_type = 'ywsbs_subscription' ";
	$query .= "AND ( wp_postmeta.meta_key = 'status' AND wp_postmeta.meta_value = 'active' ) "; 
        // will filters only active members
	$query .= "GROUP BY wp_posts.ID ";
	$query .= "ORDER BY ID DESC";

	$subscribers = $wpdb->get_results( $query );
}

    You can do the pagination as well now.

    Final Note: There is a file /plugins/yith-woocommerce-subscription/includes/admin/class.ywsbs-subscriptions-list-table.php, look or find the function prepare_items() , this is where I derived above query from.