[ItwebdevelopmentParticipant]

Hi, I’d like to style my woocommerce product page to be like this:

https://gyazo.com/5df0d95f15bcedf37cd25946b00ec552

http://store.dji.com/product/mavic-pro#/?_k=7v6naq (Page link)

With icons and text.

Here’s a link to my page:

https://www.dzdrones.com/product/carbon-fiber-dzm-drone-assembled-tested-and-tuned/

Is there anyway to do this?

Thanks!

[ChristopherModerator]

Hi there,

Please check this page http://demo.theme.co/integrity-1/shortcodes/icons/ to add icons.

e.g :

[x_icon type="adjust"] text goes here

Hope it helps.

[ItwebdevelopmentParticipant]

Hi thanks for your message. I was just wondering if there was any way to make the boxes with the icons in them and text in them like on the demo site.

Thanks

[Rue NelModerator]

Hello There,

Thanks for writing in! To align them in boxes, you can make use of the block grid shortcode and then insert the icon + text inside the grid items. Perhaps something like this:

[block_grid type="two-up"] [block_grid_item] [x_icon type="adjust"] text goes here [/block_grid_item] [block_grid_item] [x_icon type="globe"] text goes here [/block_grid_item] [block_grid_item] [x_icon type="anchor"] text goes here [/block_grid_item] [block_grid_item] [x_icon type="umbrella"] text goes here [/block_grid_item] [/block_grid]

To know more about the block grid shortcode, you can check it here: http://demo.theme.co/integrity-1/shortcodes/block-grid/

[ItwebdevelopmentParticipant]

Thanks for your message. I tried this but I want to style the text to be like the example. It wont let me put the text side-by-side.

Can you tell me how to put the text in a similar fashion

[Rue NelModerator]

Hello There,

Thanks for updating in! I have created a product test page here:
https://www.dzdrones.com/product/an-x-test/

I applied the block grid shortcode. Please see if this is what you are looking for.

Thank you.

[ItwebdevelopmentParticipant]

Thanks for your message. I’ve tried this but everytime I make the icons larger it forces the text below. I want to make it look like the example.

Can you help?

Thanks.

[Paul RModerator]

Hi,

You can add a line height to have the text vertically centered.

eg.

<div style="line-height:30px;">[x_icon type="adjust" style="font-size:30px;float:left;"] text goes here</div>

Hope that helps.

[ItwebdevelopmentParticipant]

Can you give me example code of what you would type to make the example posted? With the text on top of eachother with the color etc?

Thanks!

[RadModerator]

Hi there,

You mean put them in one line? In that case, please use grid or columns too for each item. And remove the gap and line breaks that you added.

Thanks!

[Author]

Posts