Social sharing buttons

Hello,

You can use the “Popup” element for showing these social icons, for instance, create an HTML block with the social buttons and then add it to the “Popup” element, as a result, the will be shown only when you will click on the button.

https://gyazo.com/8c56fd5b8c719a3b8daec7389af6dd4d

https://gyazo.com/fba9607bc7b59f377f936227b7211db5

Kind Regards

Hello,

Yep, it is: https://prnt.sc/TQM5fd3AmxTn

You should just remove the default text here: https://prnt.sc/jf1KBxc7VO09

In the meantime, feel free to ask me any questions you may have.

Kind Regards

Hello,

If you are using WPB, please add the PHP code below to the fucntions.php file in your child theme.

if ( ! function_exists( 'woodmart_shortcode_popup' ) ) {
	function woodmart_shortcode_popup( $atts, $content = '' ) {
		$parsed_atts = shortcode_atts(
			array(
				'id'                    => 'my_popup',
				'title'                 => '',
				'link'                  => '',
				'width'                 => 800,
				'color'                 => 'default',
				'style'                 => 'default',
				'shape'                 => 'rectangle',
				'size'                  => 'default',
				'align'                 => 'center',
				'button_inline'         => 'no',
				'full_width'            => 'no',
				'bg_color'              => '',
				'bg_color_hover'        => '',
				'color_scheme'          => 'light',
				'color_scheme_hover'    => 'light',
				'woodmart_css_id'       => '',
				'css_animation'         => 'none',
				'el_class'              => '',
				'content_class'         => '',
				'icon_fontawesome'      => '',
				'icon_openiconic'       => '',
				'icon_typicons'         => '',
				'icon_entypo'           => '',
				'icon_linecons'         => '',
				'icon_monosocial'       => '',
				'icon_material'         => '',
				'icon_library'          => 'fontawesome',
				'icon_position'         => 'right',

				'wd_animation'          => '',
				'wd_animation_delay'    => '',
				'wd_animation_duration' => '',
			),
			$atts
		);

		extract( $parsed_atts );

		ob_start();

		$parsed_atts['link']     = 'url:#' . esc_attr( $id ) . '|||';
		$parsed_atts['el_class'] = 'wd-open-popup ' . $el_class;

		woodmart_enqueue_js_library( 'magnific' );
		woodmart_enqueue_js_script( 'popup-element' );
		woodmart_enqueue_inline_style( 'mfp-popup' );

		echo woodmart_shortcode_button( $parsed_atts, true );

		$content_classes  = '';
		$content_classes .= woodmart_get_old_classes( ' woodmart-content-popup' );

		if ( $content_class ) {
			$content_classes .= ' ' . $content_class;
		}

		echo '<div id="' . esc_attr( $id ) . '" class="mfp-with-anim wd-popup wd-popup-element mfp-hide' . $content_classes . '" style="max-width:' . esc_attr( $width ) . 'px;"><div class="wd-popup-inner">' . do_shortcode( $content ) . '</div></div>';

		return ob_get_clean();
	}
}

https://prnt.sc/8Zk1oF7LSU8N

Kind Regards

• This reply was modified 2 years, 4 months ago by Luke Nielsen.

Hello,

You can adjust the style of the button through the “Button style” area.

https://prnt.sc/f7zt5CJRGymW

Also, you can set the white background for the button so that when you hover the button you will not see the shape of the button.

https://prnt.sc/DlWMq856y6-X

Kind Regards

Hello,

I would like to request temporary admin access to the live site to take a better look at these buttons so then I can tell you what we can do best in this situation.

I look forward to hearing from you.

Kind Regards

Hello,

For the “Popup” button I have added the “Inline” option and now it appeared near the “Wishlist” button (https://prnt.sc/SgJEqRS0xu7F), you just have to adjust the indents.

https://prnt.sc/PUkDXZK_6A-n

Kind Regards

Hello,

I have checked the settings by using the “Backend editor”, the appearance via the link of the Layout builder and there they are inline (check the below video).

Kind Regards

• This reply was modified 2 years, 4 months ago by Luke Nielsen.

Yep, I have removed it.

I’d be happy to assist if you have any other questions or concerns.

Kind Regards

Hello,

The indents can be adjusted via the “Design options” tab that is in the settings of any element.

https://prnt.sc/ErRlp0A_g183

Kind Regards

Hello,

After enabling to the “Wishlist” element the “Inline” option, the icons appear on the same line.

https://prnt.sc/EYHqFS_FbnSQ

https://prnt.sc/vgPuEWZOCjq2

Thanks for your time and have a great day.

Kind Regards

Hello,

Please send me a screenshot from your side for a better understanding.

I await your response.

Kind Regards

You have set the “Extra large” button therefore it brokes on the laptop screen, so you have 2 ways:

1. Set any smaller button via the settings of the “Popup” element.

https://prnt.sc/Cp9jZrZr7JIt

2. Add this custom class custom-popup-btn to the “Extra button class name” field in the settings of the “Popup”.

https://prnt.sc/PO67Wr02nYTD

After that, with the help of the below code, you can reduce the button’s size. Paste it into the “Global Custom CSS” area in Theme Settings -> Custom CSS.

.single-woodmart_layout .custom-popup-btn {
	padding: 10px 10px !important;
}

Kind Regards

Hello,

I have edited the above selector and now it works (check the below video).

Kind Regards

• This reply was modified 2 years, 4 months ago by Luke Nielsen.

Hello,

Ok, Let me know if there is anything else I can help and have a good day!

Kind Regards

Hello,

It is not an error of WoodMart. You should adjust the margin bottom of the “Breadcrumbs”, set there e.g 5px and check how it will look.

https://prnt.sc/XutLv0aZ6rId

Kind Regards