Embed or Shortcode the color picker.

Hi team,

Please take a look at the private contents.

Thanks

Hello,

Please, send us a link to this custom page and your FTP access so we can try to prepare a custom code for this.

Kind Regards

Thanks again for your time and effort

Please, send me a link to the page that should have a different primary color. I mean the page on the front end.

There is no certain page in the frontend.

Am trying to replace. YOUR primary color, secondary color, page background… etc that you have on you theme settings page.

Sorry, but we were talking about the primary color only. You can do this by adding the following CSS code

body {
    --wd-primary-color: red;
}

Note that you add it using PHP and replace the red color with the value from ACF field like that:

body {
    --wd-primary-color: <?php the_field('custom_color'); ?>;
}

Perfect, but can I do the same with secondary color and buttons color .. etc?

Yes, but in this case, you need to manually search for all CSS variables in the style.css file and create a custom code to override it.
For example, alternative (secondary color) https://gyazo.com/3044caa2ce5fde38593a236f4f618254

[naldekhel]

Hi there,

Did you try the code on my website?

Its not working, I tried it in 3 ways:

#1 As you mentioned above, I did it this way `/* Colors Shortcodes */
body {
–wd-primary-color: <?php the_field(‘main_color’); ?>
}`

#2 Then I tried to get values from options page, as mentioned on here and made looks like this: `/* Colors Shortcodes */
body {
–wd-primary-color: <?php the_field(‘main_color’, ‘option’); ?>
}`

#3 I tried to make a shortcode out of ‘main_color’, ‘option’ to make it [primary_color] and then did this: `/* Colors Shortcodes */
body {
–wd-primary-color: <?php the_field(‘[primary_color]’); ?>
}`

None of them worked, I tried in wordpress customizer >> additional css. As well as, woodmart themesetting >> additional css.

I have also tried to change the field to make it output RGB string, but it did not help as well.

Any help is appreciated.

• This reply was modified 3 years ago by naldekhel.
• This reply was modified 3 years ago by naldekhel.

Here is another idea

Custom CSS field is not the right place for the PHP code. You need to put it in the functions.php file in your child theme.
Try this code snippet

function hook_css() {
    ?>
        <style>
            body {
               –wd-primary-color: <?php the_field( 'main_color' ); ?>
            }
        </style>
    <?php
}
add_action('wp_head', 'hook_css');

Am sorry but it wouldn’t work.

I tried to put it as snippet, in the child theme function.php and in the main theme function.php

It still shows the color that was chosen in your theme setting.

Please, send the link to the page where you have set a different color via the ACF custom field.

right here:

But it is a kind of page on the backend, and we thought that you want to apply custom color for some particular page on the frontend. Please, clarify the purpose since we are a bit confused now.

Okay

In this case, the code will be the same but you need to use the right function to print the value from ACF custom options page as shown on the screenshot https://monosnap.com/file/Bt6O1EN2Z3b7mtlUF6OYvfIIGGWcwn
If you can’t find the right function you would better contact ACF devs for help.

I am 100% percent sure that this is the right function, which I have been using on all other fields:
<?php the_field('main_color', 'option'); ?>

We have corrected the code for you. Please, check how it works now.

By the way, what hosting server and plan do you use? Your website is blazing fast 🙂

[naldekhel]

I can confirm my friend that it’s working PERFECTLY!!

Could you please tell me, where have put the code, so I can copied it and the same for the other codes.

# For the hosting am usin A2hostin VPS with turbo speed.

Believe me, its the best server you will find in the marker! Believe me am trying to find the perfect host since 2007. Never seen a faster servers. If you find my website fast, then it means ( amsterdam ) is closest server to your location. Try their cheaperst plan with amsterdam server, they will give you a month for free.

• This reply was modified 3 years ago by naldekhel. Reason: corrected a grammar mistake :)

Okay I can see it in the child theme function.php

Thanks my friend. And so sorry if I have taken a lot of your time.

Am sorry one last thing, could you please take a look at the quick view option?

Please take a look here:

Hello,

Thank you for sharing your experiance!

There is a bug in our theme so please find this file: woodmart\inc\integrations\woocommerce\modules\quick-view.php

Then find this line:

remove_action( 'woocommerce_single_product_summary', array( XTS\WC_Wishlist\UI::get_instance(), 'add_to_wishlist_single_btn' ), 33 );

And replace with this one:

if ( woodmart_get_opt( 'wishlist', 1 ) ) {
	remove_action( 'woocommerce_single_product_summary', array( XTS\WC_Wishlist\UI::get_instance(), 'add_to_wishlist_single_btn' ), 33 );
}

It will be fixed in our next theme update soon.

Best Regards

I can confirm its all working!

One last thing I promise, am trying to make all letter-spacing: 0px but am unable so far.

What I did was I went and got all the css line of the letter-spacing and put it on the child-theme style.css like this:

/*
Letter-Spacing Starts
*/

.vc_progress_bar .vc_single_bar .vc_label {
  letter-spacing: 0px;
}
  .product-label {
    letter-spacing: 0px;
  }

    .widget_layered_nav_filters a {
      letter-spacing: 0px;
    }

    .quick-shop-wrapper .quick-shop-close > a {
      letter-spacing: 0px;
     }

     label[for="wd-add-img-btn"] {
       letter-spacing: 0px;
 }

 .popup-quick-view .view-details-btn {
   letter-spacing: 0px;
 }

 .wd-compare-col .added_to_cart {
   letter-spacing: 0px;
 }

 
 div.wcmp_regi_main .button {
   letter-spacing: 0px; }

   .wcmp-quick-info-wrapper input[type="submit"], .simplePopup .submit-report-abuse, .vendor_sort input[type="submit"] {
     letter-spacing: 0px;
 }

 .woocommerce-wcmp_customer_qna #ask-qna, .review_link_data_wappers .button {
   letter-spacing: 0px;
  }

  #dokan-form-contact-seller.seller-form input.dokan-btn-theme, .dokan-theme-woodmart input.dokan-btn[type='submit'],
  .dokan-theme-woodmart .dokan-btn {
    letter-spacing: 0px;
 }

 #dokan-store-listing-filter-wrap .right .item .dokan-btn-theme, #dokan-store-listing-filter-form-wrap .apply-filter #apply-filter-btn, .dokan-theme-woodmart input.dokan-btn-theme[type='submit'],
 .dokan-theme-woodmart .dokan-btn-theme {
   letter-spacing: 0px;
}

#yith-wpv-abuse {
  letter-spacing: 0px;
}

.whb-column form.woocommerce-currency-switcher-form select,
.whb-column form.woocommerce-currency-switcher-form .dd-selected {
  letter-spacing: 0px;
 }
 
 
/*
Letter-Spacing Ends
*/

Is there any alternative way to do it?

Global letter spacing is set to 0 by default. Could you please indicate some element on the page that has increased letter spacing?

Here are some:

Attachments:

You must be logged in to view attached files.

It is already set to 0 there. Changing the latter spacing doesn’t make any sense there. Here is a short video https://gyazo.com/de00a70a5a869678f0bcfb5d388ccddf

I assure you, it does make a difference.

Look here:
https://streamable.com/jh54bp

You are right about the button element. Here is a code snippet to change this

.btn, .button, [type=button], [type=submit], button {
  letter-spacing: 0;
}

Kind Regards

[Author]

Posts