WordPress

How to Change WooCommerce Checkout Layout

by

In the “woocommerce/templates/checkout” folder there is a file called “form-checkout.php”. Copy the contents of that file to “yourtheme/woocommerce/checkout/form-checkout.php” On line ~54 there is the following code: [php]<?php do_action( ‘woocommerce_checkout_order_review’ ); ?>[/php] Move that to just below: [php]<form name="checkout" method="post" class="checkout" action="<?php echo esc_url( $get_checkout_url ); ?>">[/php] and add: [php]<?php $order_button_text = apply_filters( ‘woocommerce_order_button_text’, __( ‘Place … Read more

IE 7 and 8 Not Showing Perfect Design View [WordPress]

by

I absolutely hate IE, specially versions 6, 7 and 8. When you are designing a wordpress theme, you have to style it twice, once for proper browsers and then for the IE ancients. The other big thing to remember, these ancients don’t have support for media queries. So to solve your problem, create a stylesheet … Read more

Render WooCommerce Block ‘Product Filter – Attributes’ in code rather than via backend

by

Block content (including woocommerce blocks) can be rendered in a template via the do_blocks() function. The easiest way to generate the block code is to create a new post/page, insert the block you want, configure the attributes/settings as needed, then switch from the Visual editor to the Code editor (shortcut: Ctrl+Shift+Alt+M) to get the code required. Here is an example of the … Read more

How to Add Container Div to Every Gutenberg-Block in WordPress

by

If someone also need this nowadays WordPress already has another filter that is easier to implement called render_block render_block Here is an example [php]function wporg_block_wrapper( $block_content, $block ) { if ( $block[‘blockName’] === ‘core/paragraph’ ) { $content = ‘<div class="wp-block-paragraph">’; $content .= $block_content; $content .= ‘</div>’; return $content; } elseif ( $block[‘blockName’] === ‘core/heading’ ) { … Read more

How do I use a Font Awesome icon for a custom Gutenberg block?

by

Success! I had to pass the viewBox attribute from the Font Awesome SVG file. The code below worked for me: [php]const iconEl = el(‘svg’, { width: 20, height: 20, viewBox: ‘0 0 512 512’ }, el(‘path’, { d: "M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 … Read more

How to disable Gutenberg / block editor for certain post types?

by

It’s possible to simply disable the editor using a WordPress filter. WordPress 5 and Higher If you want to disable the block editor only for your own post types, you can add following code into your plugin or functions.php file of your theme. [php]add_filter(‘use_block_editor_for_post_type’, ‘prefix_disable_gutenberg’, 10, 2); function prefix_disable_gutenberg($current_status, $post_type) { // Use your post type key … Read more

How to Remove Gutenberg CSS

by

ou need to remove the -css when trying to dequeue the script. That’s added to the HTML markup and not the actual tag for the css file. If you search the code (the location of the enqueue may change as Gutenberg gets rolled into core), you can find: [php]wp_enqueue_style( ‘wp-block-library’ )[/php] As you can see, there is … Read more

‘hr’ right aligned next to text – CSS

by

Explanation: Here, the main part is to use overflow: hidden; on the element, and than am creating a virtual element using an :after pseudo with content property, and am positioning it absolute to the parent element which am setting to relative [php]<h2>Hello World</h2>[/php]   [css]h2 { font-size: 20px; font-family: Arial; position: relative; overflow: hidden; } h2:after { display: inline-block; content: ""; height: 4px; background: … Read more