Divi – Ganga https://gangaramdas.com Learn how to Build Awesome Websites & Create a Web Design Business Sat, 22 Oct 2022 10:11:25 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.4 https://gangaramdas.com/wp-content/uploads/2020/06/cropped-small-favio-32x32.png Divi – Ganga https://gangaramdas.com 32 32 How to Replace Menu Text to Icons in Divi Theme https://gangaramdas.com/how-to-replace-menu-text-to-icons-in-divi-theme/ https://gangaramdas.com/how-to-replace-menu-text-to-icons-in-divi-theme/#respond Sun, 21 Aug 2022 12:40:03 +0000 https://gangaramdas.com/?p=218132

/*-----------------Menu Icons to Replace Text---------------- */
 
.menu-home a {
    font-family: 'ETmodules';
    font-size: 20px!important;
	
    color: white!important;
}
 
.menu-home a:hover {
    color: #8b312e!important;
}
li.wpmenucartli a.wpmenucart-contents span {
    font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif!important;
}

#menu-top-menu-bar:nth-child(1) > #menu-item-1697:nth-child(1) > a:nth-child(1) {
 padding-top: 3px;
}

#menu-top-menu-bar:nth-child(1) > #menu-item-1751:nth-child(2) > a:nth-child(1) {
 padding-top: 3px;
}

]]>
https://gangaramdas.com/how-to-replace-menu-text-to-icons-in-divi-theme/feed/ 0
How to add an “Ajax Add to Cart Button” Divi WooCommerce Shop Module https://gangaramdas.com/how-to-add-an-ajax-add-to-cart-button-divi-woocommerce-shop-module/ https://gangaramdas.com/how-to-add-an-ajax-add-to-cart-button-divi-woocommerce-shop-module/#respond Mon, 15 Aug 2022 19:29:02 +0000 https://gangaramdas.com/?p=218114 Add code to function.php files

 

/* Ajax Add to Cart button */
if ( ! function_exists( 'de_add_to_cart_button' ) ) {
    function de_add_to_cart_button(){
    	if ( true === et_get_option( 'add_to_cart', false ) ) {
        	add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 20 );
    	}
    }
    add_action( 'init', 'de_add_to_cart_button' );
}


 

/* Add Show/Hide Add to Cart button option */
if ( ! function_exists( 'de_append_theme_customizer' ) ) {
    function de_append_theme_customizer( $wp_customize ) {
        $wp_customize->add_setting( 'et_divi[add_to_cart]', array(
    		'type'			=> 'option',
    		'capability'	=> 'edit_theme_options',
    		'transport'		=> 'postMessage',
		    'sanitize_callback' => 'wp_validate_boolean',
    	) );
    	$wp_customize->add_control( 'et_divi[add_to_cart]', array(
    		'label'		=> esc_html__( 'Enable Add To Cart', 'Divi' ),
    		'section'	=> 'woocommerce_product_catalog',
    		'type'     => 'checkbox',
    	) );
    }
    add_action( 'customize_register', 'de_append_theme_customizer' );
}

CSS code to Theme Option

.woocommerce ul.products li.product .button {
    margin-top: 1em;
    background-color: #8b312e;
    color: #fff;
    border-radius: 0px;
    border-width: 0px;

}


.woocommerce-page a.button:after{
content: "\e079"; 
	font-size: 20px;
    padding-top: 5px;
    padding-left: 5px;
}

.woocommerce-page a.button:after{
content: "\e079";
	font-size: 20px;
    padding-top: 5px;
    padding-left: 5px;
}
.woocommerce a.added_to_cart{
color: #fefefe !important;
width: 50%;
margin-left: auto;
margin-right: auto;
float: right;
	
}
.woocommerce a.added_to_cart:after{
content: "\e079";
 font-family: ETmodules!important;
	font-size: 20px;
    padding-top: 5px;
    padding-left: 5px;
}

.woocommerce a.button.loading::after {
 content: "\e02d"; 
	font-size: 20px;
    padding-top: 5px;
    padding-left: 5px;
}

.woocommerce a.added_to_cart{
width: 50%;
margin-left: auto;
margin-right: auto;
float: left;
}


.woocommerce a.button.added::after {
    content: "\e079";
	font-family: ETmodules!important;
	font-size: 20px;
    padding-top: 5px;
    padding-left: 5px;
	
}

.archive .woocommerce a.added_to_cart{
color: #000 !important;
float: left;
}

 

]]>
https://gangaramdas.com/how-to-add-an-ajax-add-to-cart-button-divi-woocommerce-shop-module/feed/ 0
How to Customizing The Subject Of The Contact Form Module https://gangaramdas.com/customizing-the-subject-of-the-contact-form-module/ https://gangaramdas.com/customizing-the-subject-of-the-contact-form-module/#respond Wed, 15 Jun 2022 05:12:29 +0000 https://gangaramdas.com/?p=217992

In this tutorial, you will learn the how to change the Divi contact form subject line

wp_mail( apply_filters( 'et_contact_page_email_to', $et_email_to ),
				et_get_safe_localization( sprintf(
					__( '%1$s has sent you a message %2$s', 'et_builder' ),
					sanitize_text_field( html_entity_decode( $contact_name, ENT_QUOTES, 'UTF-8' ) ),
					( '' !== $contact_email ? ' by ' . $contact_email : '' )
				) ),
				! empty( $email_message ) ? $email_message : ' ',
				apply_filters( 'et_contact_page_headers', $headers, $contact_name, $contact_email )
			);

If you’d like to further customize the Subject line, you can replace this piece of text with your own Subject:

%1$s has sent you a message %2$s
]]>
https://gangaramdas.com/customizing-the-subject-of-the-contact-form-module/feed/ 0
How to add a bottom border to Divi theme mobile menu https://gangaramdas.com/how-to-add-a-bottom-border-to-divi-theme-mobile-menu/ https://gangaramdas.com/how-to-add-a-bottom-border-to-divi-theme-mobile-menu/#respond Thu, 28 Apr 2022 05:55:11 +0000 https://gangaramdas.com/?p=217883

/*Divi mobile menu bottom border links*/ .et_mobile_menu li a { padding: 15px 5px; border-bottom: 2px solid #fff!important; }


]]>
https://gangaramdas.com/how-to-add-a-bottom-border-to-divi-theme-mobile-menu/feed/ 0
How to swap multiple images when clicking over text in Divi Theme? https://gangaramdas.com/how-to-swap-multiple-image-when-click-over-text/ https://gangaramdas.com/how-to-swap-multiple-image-when-click-over-text/#respond Thu, 07 Apr 2022 07:30:06 +0000 https://gangaramdas.com/?p=217763

In this blog, I am going to explain to you, how to change multiple images when clicking on text or blurb module.

 

 

CSS Code:

.video-not-first { display: none; } .video-item-cursor { cursor: pointer; } @media all and (max-width: 980px) { .item-responsive-grid { display: grid; grid-template-columns: 50% 50%; grid-column-gap: 2vw; } } .video-walkthrough-active { background-color:#fff; margin-right:-0.5vw; margin-left:-0.5vw; box-shadow:0 10px 70px 0 rgba(103,151,255,.22),0 15px 105px 0 rgba(103,151,255,.22) !important; } .video-walkthrough-active .et-pb-icon{ color: #b0c8ff !important; }

 

JQuery Code:

jQuery(function($){
 
$('[id*="video-walkthrough-item"]').click(function() {
    var selector1 = $(this).attr('id').replace('-item', '');
  var $video   = $('#' + selector1);
   
  $video.show().siblings().hide();
  $video.addClass('play-video');
  $(".play-video .et_pb_section_video_bg video").trigger('play');
  $video.removeClass('play-video');
 
  $('[id*="video-walkthrough-item"]').removeClass("video-walkthrough-active");
  $(this).addClass('video-walkthrough-active');
 
});
});

]]>
https://gangaramdas.com/how-to-swap-multiple-image-when-click-over-text/feed/ 0
How to Make Fullwidth Divi Mobile Menu https://gangaramdas.com/how-to-make-fullwidth-divi-mobile-menu/ https://gangaramdas.com/how-to-make-fullwidth-divi-mobile-menu/#respond Sun, 27 Feb 2022 13:29:49 +0000 https://gangaramdas.com/?p=217710

In this blog, we are going to learn about the way to make full-width Divi mobile menu This code will work for all Divi WordPress website

Paste the below code to Theme Options.

.container.et_menu_container { 
     width: calc( 100% - 60px);
}

.et_mobile_menu {
     margin-left: -30px;
     padding: 5%;
     width: calc( 100% + 60px);
}

]]>
https://gangaramdas.com/how-to-make-fullwidth-divi-mobile-menu/feed/ 0
How to apply automatically a coupon based on specific cart items count in Woocommerce https://gangaramdas.com/apply-automatically-a-coupon-based-on-specific-cart-items-count-in-woocommerce/ https://gangaramdas.com/apply-automatically-a-coupon-based-on-specific-cart-items-count-in-woocommerce/#respond Sat, 22 Jan 2022 15:31:54 +0000 https://gangaramdas.com/?p=217644 In this blog, we are going to learn about the way to add coupon codes with product count in the cart. This code will work for all woocommerce WordPress website

Paste the below code to funcation.php file.

add_action( 'woocommerce_before_calculate_totals', 'auto_add_coupon_based_on_cart_items_count', 25, 1 );
function auto_add_coupon_based_on_cart_items_count( $cart ) {
    if ( is_admin() && ! defined( 'DOING_AJAX' ) )
        return;

    // Setting and initialising variables
    $coupon = 'tasterbox'; // <===  Coupon code
    $item_count = 4; // <===  <===  Number of items
    $matched    = false;

    if( $cart->cart_contents_count >= $item_count ){
        $matched = true; // Set to true
    }

    // If conditions are matched add coupon is not applied
    if( $matched && ! $cart->has_discount( $coupon )){
        // Apply the coupon code
        $cart->add_discount( $coupon );

        // Optionally display a message
        wc_add_notice( __('TASTER BOX ADDED'), 'notice');
    }
    // If conditions are not matched and coupon has been appied
    elseif( ! $matched && $cart->has_discount( $coupon )){
        // Remove the coupon code
        $cart->remove_coupon( $coupon );

        // Optionally display a message
        wc_add_notice( __('SORRY, TASTERBOX NOT VALID'), 'error');
    }
}

]]>
https://gangaramdas.com/apply-automatically-a-coupon-based-on-specific-cart-items-count-in-woocommerce/feed/ 0
How to disable payment gateway system from WooCommerce checkout? https://gangaramdas.com/disable-payment-gateway-system-from-woocommerce-checkout/ https://gangaramdas.com/disable-payment-gateway-system-from-woocommerce-checkout/#respond Fri, 10 Sep 2021 18:23:41 +0000 https://gangaramdas.com/?p=2917

In this blog, you are going to learn about super-easy ways to remove payment options without breaking your site or pulling your hair off.

With help of this code, you will be able to disable payment gateway system from WooCommerce checkout.

Copy and paste the code to snippet plugin section which I have mentioned in the video

 

add_filter( 'woocommerce_cart_needs_payment', '__return_false' );

]]>
https://gangaramdas.com/disable-payment-gateway-system-from-woocommerce-checkout/feed/ 0
How to Disable Shop Page on Woocommerce website https://gangaramdas.com/how-to-disable-shop-page-on-woocommerce-website/ https://gangaramdas.com/how-to-disable-shop-page-on-woocommerce-website/#respond Sun, 05 Sep 2021 08:25:25 +0000 https://gangaramdas.com/?p=2906

With help of this code, you will be able to disable or remove shop page on woocomerce website.

Copy and paste the code to snippet plugin section which I have mentioned in the video

Last you need to add redirection to homepage using the Redirection plugin

function woocommerce_disable_shop_page() {
    global $post;
    if (is_shop()):
    global $wp_query;
    $wp_query->set_404();
    status_header(404);
    endif;
}
add_action( 'wp', 'woocommerce_disable_shop_page' );

]]>
https://gangaramdas.com/how-to-disable-shop-page-on-woocommerce-website/feed/ 0
Divi awesome header design – Divi 4.0 theme builder tutorial https://gangaramdas.com/divi-awesome-header-design-divi-4-0-theme-builder-tutorial/ https://gangaramdas.com/divi-awesome-header-design-divi-4-0-theme-builder-tutorial/#respond Thu, 01 Apr 2021 04:58:33 +0000 https://gangaramdas.com/?p=2834

In this tutorial, I am going to show you how to design an awesome Divi header, make it sticky with the help of the Divi 4.0 theme builder.

 Code Snippet:

/* — Blurb Module — */

.et_pb_blurb_container {
position: relative;
top: 5px;
width: 200px;
}

/* — Menu CTA — */

.cta_menu a {
background-color: #f4a051;
color: #ffff !important;
padding: 10px 15px !important;

}

Hope you like the tutorial!
If you want to see complete tutorial video can watch my video also.

]]>
https://gangaramdas.com/divi-awesome-header-design-divi-4-0-theme-builder-tutorial/feed/ 0