How to remove WooCommerce Payments wc-blocks-checkout-style-css from footer - woocommerce

I have the following WooCommerce Payments stylesheet being loaded in my tag and have not been able to find out how to remove it:
<link rel='stylesheet' id='wc-blocks-checkout-style-css' href='https://www.example.com/wp-content/plugins/woocommerce-payments/dist/upe-blocks-checkout.css?ver=1.0' media='all' />
(I only use WooCommerce on certain pages so therefore do not need all of the files to be loaded on most pages) I checked with WooCommerce and was not able to get answers.
I removed the stylesheet from loading in the header successfully within the wp_enqueue_scripts action hook using:
wp_dequeue_style('wc-blocks-checkout-style');
but the following line still appears in the footer and loads the same CSS file:
<link rel='stylesheet' id='wc-blocks-checkout-style-css' href='https://www.example.com/wp-content/plugins/woocommerce-payments/dist/upe-blocks-checkout.css?ver=1.0' media='all' />

I'm looking for this answer too.
The stylesheet is enqueued by this file of the plugin:
woocommerce-payments/includes/class-wc-payments-upe-blocks-payment-method.php
<?php
/**
* Class WC_Payments_Blocks_Payment_Method
*
* #package WooCommerce\Payments
*/
/**
* The payment method, which allows the gateway to work with WooCommerce Blocks.
*/
class WC_Payments_UPE_Blocks_Payment_Method extends WC_Payments_Blocks_Payment_Method {
/**
* Defines all scripts, necessary for the payment method.
*
* #return string[] A list of script handles.
*/
public function get_payment_method_script_handles() {
wp_enqueue_style(
'wc-blocks-checkout-style',
plugins_url( 'dist/upe-blocks-checkout.css', WCPAY_PLUGIN_FILE ),
[],
'1.0'
);
wp_register_script(
'stripe',
'https://js.stripe.com/v3/',
[],
'3.0',
true
);
wp_register_script(
'WCPAY_BLOCKS_CHECKOUT',
plugins_url( 'dist/upe-blocks-checkout.js', WCPAY_PLUGIN_FILE ),
[ 'stripe' ],
'1.0.1',
true
);
wp_set_script_translations( 'WCPAY_BLOCKS_CHECKOUT', 'woocommerce-payments' );
return [ 'WCPAY_BLOCKS_CHECKOUT' ];
}
}

Related

Fontawesome cdn js gives 403 and main2 js gives 404 error on server although both worked on localhost in wordpress

i enqueue wp files for fontawesome and main.js
but fontawesome shows 403 error and main.js returns 404 error although both files exists in server
and it works on local host
but not on server
below is functions.php
function banking_files(){
//css
wp_enqueue_style('google-fonts','https://fonts.googleapis.com/css2?family=Roboto+Slab:wght#300;400;500;700&display=swap');
wp_enqueue_style('google-fonts2','https://fonts.googleapis.com/css2?family=Nunito:wght#300;400;600;800&display=swap');
wp_enqueue_style('google-fonts2','https://fonts.googleapis.com/css2?family=Oswald:wght#300;400;500&display=swap');
//wp_enqueue_style('bootstrap',get_stylesheet_uri().'/assets/css/bootstrap.css',array(),'4.0','all');
wp_enqueue_style('bootstrap',get_template_directory_uri().'/assets/css/bootstrap.css',array(),'4.0','all');
wp_enqueue_style('font-awesome','https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
wp_enqueue_style('slick-theme','https://cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.1/slick/slick-theme.css');
wp_enqueue_style('slick-css','https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css');
wp_enqueue_style('custom',get_template_directory_uri().'/assets/css/style.css',array(),microtime(),'all');
wp_enqueue_style('banking_main_styles',get_stylesheet_uri(),array(),microtime());
//js
wp_enqueue_script('jquery');
wp_enqueue_script('boot-popper','https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js');
wp_enqueue_script('boot-js','https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js');
wp_enqueue_script('fontawesome-js','https://kit.fontawesome.com/a076d05399.js');
wp_enqueue_script('slick-js','https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js');
wp_enqueue_script('main-js',get_template_directory_uri().'./assets/js/main.js',array(),microtime(),true);
}
add_action('wp_enqueue_scripts','banking_files');
error screenshot in console
enter image description here
any help will be appreciated ..thanks
The request for fontawesome returns a 403 because for whatever reason fontawesome won't accept requests from the server your website is hosted on. Status 403 means forbidden. Copy it, save it locally and reference that instead.
Your main-js returns a 404 because you're trying to use a relative path, which wp_enqueue_script doesn't like.
get_template_directory_uri().'/assets/js/main.js' is the correct way to retrieve the path, omitting the extra period.
If I'm not mistaking, any fontawesome hosted outside the fontawsome (eg: cloudfare) website in non-official. You have to go through the proper request from the start section on their website https://fontawesome.com/start. Any non-official hosting is prone to problem (eg: legal action, termination of service)
The 4.7 version isn't the youngest, we're now at 5.15.3 public and 6.0.0 pro.
It seems you're trying to load 2 different version and are doing it so without specifying any crossorigin attributes crossorigin="anonymous", which is apparently required.
Remove all fontawesome related scritps and style.
Go through the proper channel https://fontawesome.com/start and get your CDN from there.
Enqueue it with specifying a crossorigin="anonymous" attribute. (see the following snippet).
As icons are usually part of the front line, above the fold, it's a good idea to preload/prefetch them. (see the following snippet).
Setup a local fallback, if the CDN isn't available. (see the following snippet).
Everything has been tested and is working locally and online.
<?php
add_action( 'wp_enqueue_scripts', 'wpso66883439' );
if ( ! function_exists( 'wpso66883439' ) ) {
function wpso66883439() {
if ( ! is_admin() ) {
/**
* Register then enqueue font_awesome_js.
* #link https://developer.wordpress.org/reference/functions/wp_register_script/
* #link https://developer.wordpress.org/reference/functions/wp_enqueue_script/
*
* Check if CDN's url is valid, if not return fallback.
* #link https://www.php.net/manual/en/function.fopen.php
*
* Add rel='preload prefetch' <link> and required attributes to font_awesome_js.
* Filters the HTML link tag of an enqueued style & add required attributes.
* #link https://developer.wordpress.org/reference/hooks/script_loader_tag/
*/
$url_font_awesome_js = 'https://kit.fontawesome.com/13234810930.js'; //... your CDN's url goes here
$ver_font_awesome_js = '5.15.3'; //... script current version goes here
$hnd_font_awesome_js = 'font_awesome_js'; /... script handle
if ( false !== #fopen( $url_font_awesome_js, 'r' ) ) { //... test CDN and continue if success
wp_register_script( $hnd_font_awesome_js, $url_font_awesome_js, array(), $ver_font_awesome_js, true ); //... register via CDN
} else { //... fallback to local if CDN's fail
wp_register_script( $hnd_font_awesome_js, trailingslashit( get_template_directory_uri() ) . 'assets/js/13234810930.js', array(), $ver_font_awesome_js, true ); //... register via local hosting
};
wp_enqueue_script( $hnd_font_awesome_js ); //... enqueue font_awesome_js
add_filter( 'script_loader_tag', 'data_font_awesome_js', 10, 3 );
if ( ! function_exists( 'data_font_awesome_js' ) ) {
function data_font_awesome_js( $tag, $handle, $src ) { //... here we catch the <script> tag before it's loaded and we make some changes to it, add the crossorigin="anonymous" and the rel='preload prefetch' <link>
if ( 'font_awesome_js' === $handle ) {
$tag = str_replace(
array(
"<script",
"></script>",
),
array(
"<link rel='preload prefetch' href='" . esc_url( $src ) . "' as='script' crossorigin='anonymous' /><script",
" crossorigin='anonymous'></script>",
),
$tag
);
};
return $tag;
};
};
};
};
};
?>
Current script is bogus. Request CDN's script # https://fontawesome.com/start.

Installing custom font into WP not working

So, I am trying to use the Rubik Mono One font on a website of mine, but it won't show up for anyone. I use #font face and tried clearing my cache ant it still did not work, here is the css:
#font-face {
font-family: 'Rubik Mono One';
src: url(https://fonts.gstatic.com/s/rubikmonoone/v9/UqyJK8kPP3hjw6ANTdfRk9YSN983TKU.woff2) format('woff2');
}
I just made 3 different tests with 3 different fonts including Rubik Mono One and everything is working fine.
Either you're enqueuing it badly. eg: You're not using <link rel="preconnect" href="https://fonts.gstatic.com">.
Or you're using some kind of framework like Bootstrap which is taking priority over your font.
Understanding dependencies and sequential order
Wordpress let you specify a dependency array upon script enqueuing.
$deps (string[]) (Optional) An array of registered stylesheet handles this stylesheet depends on. Default value: array()
Source # https://developer.wordpress.org/reference/functions/wp_enqueue_style/
Your css enqueuing order should look like this:
framework → google font → stylesheet
If your stylesheet is enqueued last, your defined style will be higher up in the firing sequence.
As I mentioned, we also need to add <link rel="preconnect" href="https://fonts.gstatic.com"> for Google Font to actually work. We can do just that by using style_loader_tag wordpress filter, which will filters the HTML link tag of our enqueued Google Font.
Here is the final code. Do keep in mind that, if you're using a framework you must specify the dependency for the Google Font tag.
<?php
add_action( 'wp_enqueue_scripts', 'theme_fonts' );
function theme_fonts() {
if ( ! is_admin() ) {
/**
* Register & Enqueue gfont_css.
* #link https://developer.wordpress.org/reference/functions/wp_enqueue_style/
*/
wp_enqueue_style( 'gfont_css', 'https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap', [], wp_get_theme()->version, 'all' );
/**
* Add mandatory Google Font rel='preconnect' <link> and required attributes to gfont_css
* Filters the HTML link tag of an enqueued style & add required attributes
* #link https://developer.wordpress.org/reference/hooks/style_loader_tag/
*/
add_filter( 'style_loader_tag', 'data_gfont_css', 10, 3 );
function data_gfont_css( $tag, $handle, $src ) {
if( $handle === 'gfont_css' ) {
$tag = str_replace(
"<link rel='stylesheet'",
"<link rel='preconnect' href='https://fonts.gstatic.com'>" . PHP_EOL . "<link rel='stylesheet'",
$tag
);
};
return $tag;
};
/**
* Register & Enqueue style_css.
* #link https://developer.wordpress.org/reference/functions/wp_enqueue_style/
*/
wp_enqueue_style( 'style_css', get_stylesheet_uri(), [ 'gfont_css' ], wp_get_theme()->version, 'all' );
};
};
?>
Dependencies are specified in betweens the brackets //... [ 'gfont_css' ] which is the equivalent to array( 'gfont_css' ).
Finally we can apply our font to our elements in our style.css, and we can add an !important statement to override as a redundancy. better not to do it tho if you're using multiple fonts.
body {
font-family: 'Rubik Mono One', sans-serif !important;
}

How to change Wordpress Gutenberg visual editor default font family

How can I make my website theme's font the same as Wordpress Gutenberg visual editor default font family ?
Everytime I publish a new post, my website font will default back to the theme's font.
I want to use the Visual Editor font in Wordpress. How to do this?
If I'm not mistaking, Gutenberg default font is based out of your OS. This approach to fonts is used to effectively reset browsers default styling.
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif
One of the possible approach would be using enqueue_block_editor_assets action hook to fire inside the editor and overwrite the font-family selector.
We can use .editor-styles-wrapper to overwrite the font-samilly and set it to whatever we want.
In the following example I chose the Ubuntu font-family from the Google Font website.
Now of course for production use, you would base your font out of your theme's font.
<?php
/**
* Fires after block assets have been enqueued for the editing interface.
* #link https://developer.wordpress.org/reference/hooks/enqueue_block_editor_assets/
* In the function call you supply, simply use wp_enqueue_script and wp_enqueue_style to add your functionality to the block editor.
*/
add_action( 'enqueue_block_editor_assets', function() {
/**
* Register & Enqueue gfont_css.
* #link https://developer.wordpress.org/reference/functions/wp_enqueue_style/
*/
wp_enqueue_style( 'gfont_css', 'https://fonts.googleapis.com/css2?family=Ubuntu:wght#400;700&display=swap', [], wp_get_theme()->version, 'all' ); //... replace by any font, if your theme isn't using Google Font just enqueue a font font from your theme's directory instead and remove the data_gfont_css function below.
/**
* Add mandatory Google Font rel='preconnect' <link> and required attributes to gfont_css
* Filters the HTML link tag of an enqueued style & add required attributes
* #link https://developer.wordpress.org/reference/hooks/style_loader_tag/
*/
add_filter( 'style_loader_tag', 'data_gfont_css', 10, 3 );
function data_gfont_css( $tag, $handle, $src ) {
if( $handle === 'gfont_css' ) {
$tag = str_replace(
"<link rel='stylesheet'",
"<link rel='preconnect' href='https://fonts.gstatic.com'>" . PHP_EOL . "<link rel='stylesheet'",
$tag
);
};
return $tag;
};
} );
/**
* Fires in head section for all admin pages.
* Overwrite default Wordpress Gutenberg default font-familly.
* #link https://developer.wordpress.org/reference/hooks/admin_head/
*/
add_action( 'admin_head', function() {
/**
* Get the current screen object.
* If the screen object is the Gutenberg editor then inject our overwrite.
* #link https://developer.wordpress.org/reference/functions/get_current_screen/
*/
if ( get_current_screen()->is_block_editor() )
echo "<style>.editor-styles-wrapper{font-family:'Ubuntu',sans-serif!important}</style>";
} );
?>
PHP > 7.1 required, anonymous functions used.

Add stylesheet to the starter theme

What is the proper method for adding a stylesheet to the Timber starter theme for WordPress?
I would normally enqueue my stylesheet in functions.php. But is this the right way?
You can add your stylesheets in functions.php (the Wordpress traditional way) or use a custom function (to be added in functions.php) that allows you to add the stylesheets directly into the twig templates. This way you can enqueue a stylesheet only where it is actually used.
The Timber starter theme has a specific section for custom functions in the functions.php file.
Function to add to functions.php:
/** This is where you can add your own functions to twig.
*
* #param string $twig get extension.
*/
$function = new Twig_SimpleFunction('enqueue_style', function ($handle, $src) {
wp_enqueue_style( $handle, get_stylesheet_directory_uri() . '/static/css/'.$src);
});
$twig->addFunction($function);
change /static/css/ to suit your needs. Now you can enqueue the styles directly into your twig templates like this:
{{ enqueue_style('global','global.css') }}
If you need to add external stylesheets you can use a slightly different function:
/** This is where you can add your own functions to twig.
*
* #param string $twig get extension.
*/
$function = new Twig_SimpleFunction('enqueue_style_ext', function ($handle, $src) {
wp_enqueue_style( $handle, $src);
});
$twig->addFunction($function);
and then enqueue like this:
{{ enqueue_style_ext('tachyons','https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.11.1/tachyons.min.css') }}
The original function was posted in a timber github issue

Using Woocommerce Hooks in a Wordpress Plugin

I created a sample plugin for using woocommerce hooks. Basically my requirement was to add some javascript to the footer of the wordpress page based on some woocommerce hooks. However, those hooks don't seem to get fired at all. I have woocommerce installed. If I put the same code in theme's function file, the javsacript gets added, but not from the plugin.
In the plugin, there are three actions. The first action is a plain wp_footer action which works and js is added. the remaining two are woocommerce actions and are not getting fired. Can anyone please help? I am sure I am calling the hooks the wrong way but I can't figure out.
<?php
/*
* Plugin Name: Demo Woo Plugin
* Plugin URI:
* Description:
* Version: 1.0
* Author:
* Author URI:
* License: GPLv2
*/
/*
*/
if(!class_exists('Demowoo')) {
class Demowoo {
var $plugin_url;
var $plugin_dir;
public function __construct() {
global $woocommerce;
$this->plugin_url = trailingslashit( WP_PLUGIN_URL . '/' . dirname(plugin_basename(__FILE__)) );
$this->plugin_dir = trailingslashit( plugin_dir_path(__FILE__) );
add_action( 'wp_footer', array($this, 'demowoo_content') );
// initiate woocommerce hooks and activities
add_action('woocommerce_init', array($this, 'on_woocommerce_init'));
add_action('woocommerce_after_cart_contents', 'cart_page_visited');
}
public function install() {
}
public function deactivate() {
}
/**
* Append the required javascript.
*/
public function demowoo_content() {
echo '<script type="text/javascript">console.log("Demo Plugin Content");</script>';
}
public function on_woocommerce_init() {
add_action('wp_footer', 'woocommerce_initialized');
}
public function woocommerce_initialized() {
echo '<script type="text/javascript">console.log("JS through woo commerce init.");</script>';
}
public function cart_page_visited() {
add_action('wp_footer', 'demo_woo_add_to_cart');
}
public function demo_woo_add_to_cart() {
echo '<script type="text/javascript">console.log("JS for added_to_cart on the cart page");</script>';
}
} // End class
$Demowoo = new Demowoo();
if($Demowoo) {
register_activation_hook( __FILE__, array(&$Demowoo, 'install'));
}
}
All your calls of add_action should use the form array($this, 'method_name') in their second parameter, like the first hook on wp_footer. This is because you are hooking methods of an object, not functions.
If you just write the name of the method WP will look for a global function with that name, not a class method. Since there are no global functions with those names, nothing happens.
The array syntax allows WP to know not only the method name but which object it should be invoked from. PHP cannot just invoke an object method without having an instance of the object, so you need to provide one to the hooking system. With the style to define plugins that you're using here the object instance is usually always $this.

Resources