June WooCommerce WordPress Theme Snippets and Tricks - Codeless

June WooCommerce WordPress Theme Snippets and Tricks - Codeless

In this article we will list all snippets and tricks that you can use during create a website with June WordPress Theme

Center a custom header column only in mobile

Sometimes you need to make a custom design of the header in mobile. For example one of our clients, needs to make a column of the header ( from the header builder ) centered in mobile in a particular layout. In the same time, he needs to maintain unchanged the layout on larger screens. To do this just add this code on: Customizer -> General -> Custom Css Code

@media (max-width:767px){ .main.header-row .c-left.header-col{ position: absolute; left: 50%; transform: translateX(-50%); } }

Change the “main” if it is not the main header row and change “left” with the column position ( left, middle, right )

How to add a custom font in June Theme ?

First, make sure you are using a child theme to make changes in code. In child-theme functions.php add this code:

add_filter( 'kirki/fonts/standard_fonts', 'add_a_custom_font' ); function add_a_custom_font( $standard_fonts ){ $standard_fonts[ 'new_font_tag' ] = array( 'label' => 'Serif', 'stack' => 'Georgia,Times,"Times New Roman",serif' ); return $standard_fonts; } function enqueue_font_css() { // In this file will be included the new font wp_enqueue_style( 'new_font_css', get_template_directory_uri() . '/font/font_css.css' ); } add_action( 'wp_enqueue_scripts', 'enqueue_font_css');