Home Support Themes ExpertHive Remove Box around vendor in Listing

Remove Box around vendor in Listing

  • Author
    Posts
  • Alf

    Hello,

    First of all, thank you very much for all the support. This is very helpful.

    Another question: in the Listing page, is it possible to remove the square box around the Vendors picture and leave only the circular image?
    I have been able to hide all the rest of the parameters (name, vendors info, etc.) but I cannot get rid of the square box, which takes too much space.

    Would there be some nice CSS code to do the job?
    This is how far I got: https://snipboard.io/aXiJAK.jpg

    Thank you again!

    Alf

    Nevermind this reply. I finally did it.

    I added the following code through snippets.
    The only problem now is that the frame is still visible when passing the mouse on top of it (it is highlighted). I will keep working on it. If anyone knows a more “elegant” way to do this, I am all ears. I am quite new at this, so happy to learn from others.

    I also used display:unset to hide the container. It worked very well, but the Vendor’s page gets messed up.

    add_action( 'wp_head', function () { ?>
    <style>
    
    	.hp-vendor--view-block .hp-vendor__footer {
    		display: none;		/*removes line with info and clicking area to send message*/
    	}
    	.hp-vendor--view-block .hp-vendor__details--primary, .hp-vendor--view-page .hp-vendor__details--primary {
    		display: none;/*removes Member Since area*/
    	}
    
    	.hp-vendor--view-block .hp-vendor__header {
    		padding: 0;
    	} /*makes container just as tall as picture*/
    	
    	.hp-vendor--view-block .hp-vendor__content{
    		display:none;
    	} /*hides name under picture & bottom part of the container*/
    	
    	.hp-vendor--view-block, .hp-vendor--view-page .hp-vendor__summary {
    		box-shadow: 0 0px 0px rgb(0 0 0 / 0%);
    		background-color: #fff;
        	border-radius: 4px;
        	position: relative;*/
    	}/* turns shadow into white but visible (highlighted when mouse pases on top) */
    	
    	
    </style>
    <?php } );
    ihor developer

    Thanks for sharing! Just a tip – you can add custom CSS snippets in Appearance/Customize/Additional CSS field, you don’t have to wrap each CSS snippet with PHP (add_action).

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.