Social sharing buttons

Hello,

Is it possible that the social sharing buttons appear in a collapsed form? I don’t want them all to appear at the same time, but rather a popup with those social network buttons appears through a single button.

Thanks.

All the best,

Attachments:

You must be logged in to view attached files.

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

Hi Luke

Thanks for the info. I have tried to put the popup, but what does not let me is to put only an icon, it puts text in a mandatory way. Is it possible that it only includes an icon?

Thank you
All the best,

Attachments:

You must be logged in to view attached files.

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

Hi Luke,

I’m using WPBakery and if I leave the text blank, the word “Go” appears by default. I guess in Elementor it is different.

Can you tell me how to do it in WPBakery?

Thanks.

[Luke Nielsen]

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,

Ok, I have already seen that it works, but I would like to delete the shape of the button, since it does not look good on hover.

Thanks.

All the best,

Attachments:

You must be logged in to view attached files.

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,

Ok, I see that it only works with one type of button, with the one you indicate, the hover is still visible despite setting it to white.

Anyway, I’m having another problem related to that button, which is that with the drag & drop system it only lets me put the button below the whislist button, and I want to put it next to it. I know that there is the possibility of making different rows, but then both buttons are not together.

kind regads,

Attachments:

You must be logged in to view attached files.

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

Hi Luke,

There You have de Link.

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

Hi Luke,

I have activated the “Inline” option, but nothing has changed, they have not been placed on the same line as you show me in the photo.

Regards

Attachments:

You must be logged in to view attached files.

[Luke Nielsen]

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.

Ok, let me check it. Until then, can you delete the video you posted from the web?

Regards

Yep, I have removed it.

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

Kind Regards

Hi Luke,

I have tried to make them at the same height but nothing has been updated. Can you tell me in which section I change the indents.

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

Hi Luke,

Ok, got it, but I’ve changed the button type and it no longer appears on the same line as whislist. You can help me with that?

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

Hi Luke,

I just entered the control panel and it does not appear on the same line. I have tried it both in the applied product and in the WPbakery view and it is not on the same line.

Regards

Hello,

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

I await your response.

Kind Regards

Hi Luke,

This is what I see.

Regards

Attachments:

You must be logged in to view attached files.

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

Hi Luke,

I have tried the second option and does not work, nothing changed.

Regards

[Luke Nielsen]

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.

Hi Luke,

Ok I´ll check it. Until then can You delete de video, please?

Thanks

Hello,

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

Kind Regards

Hi Luke,

I’m still testing and the inline functionality still doesn’t work right. As you can see in the photo, I have put the Whislist section in another place to do a test, and when activating the Inline functionality both in “whislist” and in “breadcrubms” it does not stay on the same line.

Is it an error that woodmart has or do we have to do it in another way?

Regards

Attachments:

You must be logged in to view attached files.

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

[Author]

Posts