WordPress Tricks

In elementor font family is used var( –e-global-typography-primary-font-family ) how to change this font?

January 27, 2023 allaboutbasic

To change the font family in Elementor, you can do the following:

Go to the Elementor editor for the page or template where you want to change the font family.
Click on the hamburger menu icon in the top left corner to open the Global Settings.
Go to the Typography tab.
Under the Primary Font section, you will see the option to change the font family.
You can either choose a font from the dropdown menu or enter the name of a custom font you want to use.
Click on the Save button and the new font family will be applied to all elements on your page that use the primary font.

Create free Yoga instruction or teaching site for free using wordpress Oceanwp theme: 4 Minute video

January 10, 2023 allaboutbasic

If you are a Yoga instructor and trying to create your website, here is your solution. Here I have shown in a video (4minutes) how you can create your initial Yoga Teaching site for free and how u can set up the site.

You can see Demo here.

Here is the OceanWP Theme.

WordPress Tricks

Click on Link and Scroll to ID: Fix Overlapping issue of top fixed header

September 29, 2022 allaboutbasic

Sometimes you face issue where Top fixed header overlap the portion of the Target. To fix the issue you can use this jquery code. You need to have good understanding about how to use it. Or do a comments if you need help

You need to change the Parent Element ID or Class in the provided code

 jQuery('Parent Element ID or Class').on('click', 'a', function(e){
		   e.preventDefault();
		   e.stopImmediatePropagation();
	var id=	jQuery(this).attr('href');
		 console.log(id);
 jQuery('html,body').animate({scrollTop: jQuery(id).offset().top -180},'slow');
	   });

WordPress Tricks

Media display settings set “Link to” “Media File” or “None” by default

September 18, 2022 allaboutbasic

I am sharing you the code to do this

set Link To “Media File”

add_action( 'after_setup_theme', 'default_attachment_display_settings' );
function default_attachment_display_settings() {
	update_option( 'image_default_link_type', 'file' );
}

set Link To “None”

add_action( 'after_setup_theme', 'default_attachment_display_settings' );
function default_attachment_display_settings() {
	update_option( 'image_default_link_type', 'none' );
}

WordPress Tricks

How to Add a product search form in woocommerce Category page

September 9, 2022 allaboutbasic

Here I am sharing you the code to show a product search form in woocommerce category page. You need to put the code in functions.php page

adding product search form in woocommmerce product category page

add_action( 'woocommerce_before_shop_loop', 'my_woocommerce_before_shop_loop' );

function my_woocommerce_before_shop_loop() {
    if ( is_tax( 'product_cat' )   ) {?>

<div class="et_pb_row et_pb_row_0 et_pb_equal_columns et_pb_gutters3 productsearch">						
<form role="search" method="get" class="woocommerce-product-search" action="<?php echo esc_url( home_url( '/'  ) ); ?>">
	<label class="screen-reader-text" for="s"><?php _e( 'Search for:', 'woocommerce' ); ?></label>
	<input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search Products&hellip;', 'placeholder', 'woocommerce' ); ?>" value="<?php echo get_search_query(); ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label', 'woocommerce' ); ?>" />
	<input type="submit" value="<?php echo esc_attr_x( 'Search', 'submit button', 'woocommerce' ); ?>" />
	<input type="hidden" name="post_type" value="product" />
</form>						
						</div>
<?php
         
    }
}

WordPress Tricks

WordPress Copy Content Protection: Protect Specific page to be copied and disable CTRL+C, CTRL+V using jQuery and Javascript

May 31, 2022 allaboutbasic

Here I am sharing you a code snippet which you can use to protect your specific page to be copied. This Code will disable Right Click, CTRL+C and CTRL+V etc. I got this code from StackOverflow.com and modified it a little so that you can use it for your WordPress Page.

Just change the Page ID in the code with your own page ID which you want to be protected.

<?php
	if(is_page('YOUR PAGE ID')){?>
<script>

jQuery(document).ready(function() {
 jQuery(function() {
       jQuery(this).bind("contextmenu", function(e) {
            e.preventDefault();
        });
    });
});
	
// Disable Right click
document.addEventListener('contextmenu', event => event.preventDefault());

// Disable key down
document.onkeydown = disableSelectCopy;

// Disable mouse down
document.onmousedown = dMDown;

// Disable click
document.onclick = dOClick;

function dMDown(e) { return false; }

function dOClick() { return true; }

function disableSelectCopy(e) {
    // current pressed key
    var pressedKey = String.fromCharCode(e.keyCode).toLowerCase();
    if ((e.ctrlKey && (pressedKey == "c" || pressedKey == "x" || pressedKey == "v" || pressedKey == "a" || pressedKey == "u")) ||  e.keyCode == 123) {
        return false;
    }
}	
	
</script>
<?php } ?>

WordPress Tricks

Woocommerce shortcode to show product image, sku, regular price, sales price, title using wp_Query

April 14, 2022April 14, 2022 allaboutbasic

Here I am sharing you the code to see how it works. The shortcode will be [strong_overstock_products]

function strong_overstock_products_output(){
 $args = array(
        'post_type'      => 'product',
         'product_cat'    => 'overstock'
    );

    $loop = new WP_Query( $args );
?>
 
<ul class="txt">
<?php
    while ( $loop->have_posts() ) : $loop->the_post();
        global $product;
	 $sku = get_post_meta( get_the_ID(), '_sku', true );
	echo '<li class="wc-taxonomy-child">' ;
        echo '<br /><a href="'.get_permalink().'">' . woocommerce_get_product_thumbnail().'<div class="taxc-product--overlay">
                            <div>
			                    VIEW PRODUCT                            </div>
                        </div>'.' </a>';
	echo "<div class='sku'>SKU : ".$sku."</div>";
	  echo ' <a href="'.get_permalink().'">' .get_the_title().'</a>';
   $pricer = get_post_meta( get_the_ID(), '_regular_price', true );
	$prices = get_post_meta( get_the_ID(), '_sale_price', true );
if ( $product->is_on_sale()) {
                 echo '<p class="taxc-product--price">
                    <del aria-hidden="true"><span class="woocommerce-Price-amount amount"><bdi> ' .$pricer.'</bdi></span></del> <ins><span class="woocommerce-Price-amount amount"><bdi>' .$prices . ' </bdi></span></ins> </p>';
            } else {
                 echo '<p class="taxc-product--price">
                      <ins><span class="woocommerce-Price-amount amount"><bdi>' .$pricer . ' </bdi></span></ins> </p>';
            }
	
	?>
	 
		
<?php	
	echo '</li>' ;
	endwhile;
	?>
</ul>	
<?php	

    wp_reset_query();
}

add_shortcode('strong_overstock_products', 'strong_overstock_products_output');

WordPress Tricks

Multi Blog By themeinwp :Photography Fashion or food blog and Modification of header footer sidebar using css

March 23, 2022 allaboutbasic

Multi Blog by ThemeinWp is a responsive WordPress theme which you can use for personal, travel, fashion, food, photography, publishing, tutorial blogs, or any other site. If you are a creative blogger,then you can use this theme. Here I am sharing you some css tips which you can use to modify the header, footer, sidebar, font color, font family and more using css. You can download MultiBlog by Themeinwp, Or you can see the demo of Multi Blog theme. If you have any question regarding css helps, feel free to ask question in comments section

Continue reading →

WordPress Tricks

WordPress Twenty Twenty-Two theme By the WordPress team : Modify header and content width using css

February 16, 2022July 9, 2022 allaboutbasic

Here I am sharing you 2 technique using css. Please Feel Free to do comments if you have any question regarding Twenty Twenty Two theme of wordpress by Automattic.

1 ) To change font size, color and font family and spacing of H1 header tag for Page titles

h1 {
    font-family: cursive !IMPORTANT;
    color: darkred;
    font-size: 25px !important;
    margin-bottom: 12px !IMPORTANT;
    margin-top: 12px !IMPORTANT;
}

2) To make contents full width using css in Twenty Twenty Two theme

.wp-block-post-content > * {
    max-width: 1022px !important;
}

3) Reduce space between two blog posts using css in Twenty Twenty two theme

.blog .wp-block-group .wp-block-spacer {
    height: 50px !important;
}

4) To reduce gap at the top of Leave A Reply Comment box in Twenty Twenty Two theme

.wp-block-post-comments {
    margin-top: 0px !IMPORTANT;
    padding-top: 0px !important;
}

5) To change font size, color, font family, font weight and using background color and alignment of “Leave a Reply” in twenty twenty two theme

h3#reply-title {
    font-size: 25px;
    color: white !IMPORTANT;
    font-weight: bold;
    font-family: cursive !important;
    background: green;
    padding: 12px;
    text-align: center;
}

6) To Change font size, background color of this Post Comment button

input#submit {
    background: darkred;
    font-size: 14px;
    font-weight: bold;
}

7) If you don’t want to show comments date in your blog post in Twenty Twenty Two theme

.comment-metadata {
    display: none;
}

8) If you want to change font size, color and font family of comments author in twenty twenty two theme

.comment-author, .comment-author * {
    font-size: 16px !IMPORTANT;
    color: darkblue;
    font-family: cursive;
}

9) If you want to make body background red and content header and footer background white

.wp-site-blocks header {
    background: white;
}
.wp-site-blocks main {
    background: white;
    margin-top: 0px;
}
.wp-site-blocks footer {
    background: white;
    margin-top: 0px !IMPORTANT;
    padding-top: 0px !IMPORTANT;
}
body {
    background: red;
}

	allaboutbasic on Dyad 2 By Automattic : Modific…
	topherbrowne on Dyad 2 By Automattic : Modific…
	allaboutbasic on Dyad 2 By Automattic : Modific…
	topherbrowne on Dyad 2 By Automattic : Modific…
	allaboutbasic on Radcliffe 2 By Anders Norén :M…
	Laureen Richard on Radcliffe 2 By Anders Norén :M…
	allaboutbasic on Radcliffe 2 By Anders Norén :M…
	allaboutbasic on Radcliffe 2 By Anders Norén :M…

Like this post?

Like this:

Like this post?

Like this:

Like this post?

Like this:

Like this post?

Like this:

Like this post?

Like this:

Like this post?

Like this:

Like this post?

Like this:

Like this post?

Like this:

Like this post?

Like this:

Like this post?

Like this: